De Cascading Style Sheets ( CSS) mark -up språk har fått i CSS3 mange nye elementer som lar deg rival i visuell skjerm gjennom programmeringen en nettside laget med bilder. CSS3 nye elementer inkluderer trekanter og avrundede hjørner, som før denne oppdateringen , var vanskelige å lage. Disse funksjonene gjør det enkelt å lage et bånd effekt selv for en nybegynner i mark -up . Et bånd er egentlig ett til flere trekanter , en boks , og en drop- shadow effekt . Disse komponentene kobles sammen for å lage en 3D- bånd som du kan plassere over overskrifter , bannere, eller noe annet sted i websiden din. Instruksjoner
en

Lag en overskrift eller tittel tag . For eksempel , hvis du ønsker din første header på siden din for å si "Header , " din mark -up vil vises som: " .

Header < /h1 >" Lukk alltid en HTML-kode med et backslash .
2

Gi HTML kode stylings du vil med CSS. Omfatte i det minste dens posisjon, størrelse og farge. For eksempel refererer din

tag, CSS påslag vil se ut : en

h1 {position : absolute ; bredde : 20 % ; padding: 10px ; background- color: # 999 ; }

Gjør hver linje av CSS mark -up en egen linje . Begynn og avslutt hver setning med åpne og lukkede parentes . "Position : absolute " betyr plasseringen av elementet er absolutt, og endres ikke uansett hva annet som skjer på siden . Bredden er satt til 20 prosent av skjermen eller bin h1 tag er satt inni , for eksempel en " div " eller "tabellen ". Den padding gir h1 tag litt ekstra pusterom . Den background-color setter farge rundt teksten .
3

Lag en trekantet "etter" pseudo - element for å legge til din header tag . Den "etter" pseudo - element som er nytt i CSS3 og lar deg plassere et element direkte etter en annen. Gjør det til en trekant ved å sette mer enn én av sine grenser til gjennomsiktig . Markup etter at

tag vil nå se slik ut : en

h1 : etter { position: absolute ; venstre: 0 , topp: 100 % ; border- width : 10px 10px ; border- style : solid ; border- color: # 666 # 666 gjennomsiktig gjennomsiktig ;}

posisjon og venstre stil setter trekanten nederst til venstre i h1 elementet . Den øverste og grensen stiler angi størrelsen på trekanten. Den border- color stil gjør blokken vises som en trekant og grenseområdene -farger som vises er mørkere enn fargen på overskriften , og skaper en 3D-effekt , som om overskriften blokken er kraftig folding bakover som et bånd .

4

Legg til flere effekter med trekant elementer for å fullføre båndet utseendet på overskriften din . Plasser disse siste trekanter på begynnelsen av overskriften din , og på slutten , slik at båndet har et flagg -lignende utseende. Din CSS påslag vises nå i helhet : en

h1 {position : absolute ; bredde : 20 % ; padding: 10px ; background- color: # 999 ;}

h1 : etter { posisjon: absolutt; venstre: 0px; topp: 100 % ; border- width : 10px 10px ; border- style : solid ; border- color: # 666 # 666 gjennomsiktig gjennomsiktig ;}

h1 : før {position : absolutt, høyre: 0px; top : 0px ; border- color : gjennomsiktig # fff gjennomsiktig gjennomsiktig ;}

h1 : før { position: absolute ; venstre :- 30px ; topp: 12px ; border- width : 20px 10px ; border- color: # 999 # 999 # 999 gjennomsiktig ;}

den første " : før " element skaper et flagg - effekt på høyre side av spissen. Den andre " : før " . Element skaper et flagg stil på venstre droppet siden av header