Den Cascading Style Sheets ( CSS) mark-up sprog har vundet i CSS3 mange nye elementer, der lader dig rival i visuel display via programmering af en hjemmeside lavet med billeder . CSS3 nye elementer omfatter trekanter og afrundede hjørner , som før denne opdatering , var vanskelige at skabe. Disse funktioner gør det nemt at skabe et bånd effekt selv for en novice i mark-up. En bånd er væsentlige én til flere trekanter , en boks, og en drop- shadow effekt . Disse komponenter tilsluttes sammen for at skabe et 3D- bånd , som du kan placere i overskrifter , bannere eller andre steder i din webside. Instruktioner
1

Opret et sidehoved eller titel-tag . For eksempel, hvis du vil have din første header på din side til at sige " Header ", din mark- up ville fremstå som : Always " .

Header

" lukke en HTML-tag med en backslash .
2

Giv din HTML-tag de stylings du vil med CSS. Medtag mindst sin position , størrelse og farve . For eksempel refererer din

tag, din CSS mark- up ville se ud : Hej

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

Gør hver linje i CSS mark-up en separat linje. Begynde og slutte hver erklæring med åbne og lukkede parenteser. " position: absolute " betyder position element er absolut og ændrer ikke , uanset hvad der ellers sker på siden. Bredden er sat til 20 procent på skærmen eller skraldespanden H1 tag er sat inde i , såsom en " div " eller " bord ". Polstringen giver h1 tag nogle ekstra pusterum. Baggrunden -color angiver farven omkring teksten .
3

Opret en trekantet "efter" pseudo- element at tilføje til din header tag . Den "efter" pseudo- element er nyt i CSS3 og lader dig placere et element direkte efter en anden. Gør det til en trekant ved at indstille mere end én af sine grænser for gennemsigtig. Din markup efter din

tag nu ville se sådan ud : Hej

H1: efter { position : absolute; venstre : 0 ; top: 100% ; border- width : 10px 10px ; border -style : solid , border- color: # 666 # 666 transparent transparent ;}

position og venstre stil sætter trekanten nederst til venstre på h1 element . De øverste og grænsekontrol stilarter indstille størrelsen af trekanten. Grænsen -color stil gør blokken fremstå som en trekant og grænseområderne -farver , der vises er mørkere end farven på headeren , hvilket skaber en 3D-effekt , som om sidehovede er skarpt folde bagud som et bånd .
< br > 4

Tilføj flere effekter med trekant elementer til at afslutte båndet udseendet af din header. Placer disse sidste trekanter i begyndelsen af ​​din header og i slutningen , så båndet har et flag -lignende look. Din CSS mark-up vises nu i helhed : Hej

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

H1: efter { position : absolute; venstre : 0px ; top: 100% ; border- width : 10px 10px ; border -style : solid ; border- color: # 666 # 666 transparent transparent ;}

H1 : før { position : absolute; højre: 0px ; top: 0px ; border- color : transparent # fff transparent transparent ;}

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

den første " : før "-element skaber et flag effekt på højre side af sidehovedet . Den anden " : før" . Element skaber et flag stil på venstre droppet side af header