Cascading Style Sheets ( CSS ) markup language har vunnit i CSS3 många nya element som låter dig rival i visuell display programmerar en hemsida gjord med bilder . CSS3 nya inslag trianglar och rundade hörn , som före den här uppdateringen , var svåra att skapa . Dessa funktioner gör det enkelt att skapa ett band effekt även för en novis i pålägg . Ett band är i huvudsak en till flera trianglar , en låda och en drop - skuggeffekt . Dessa komponenter anslutas tillsammans för att skapa en 3D- band som du kan placera över headers , banners , eller någon annanstans i din webbsida . Instruktioner
1
Skapa ett sidhuvud eller titel tagg . Till exempel , om du vill att din första rubrik på din sida för att säga " Header , " din uppräkning skulle visas som : " .
Header < /h1 > " Stäng alltid en HTML-tagg med en backslash .
2
Ge din HTML-tagg stylingsna du vill med CSS . Inkludera åtminstone sin position , storlek och färg . Till exempel , referera din
tag , din CSS uppräkning skulle se ut :
h1 { position: absolute ; width : 20% ; padding : 10px ; background- color : # 999 ; }
Gör varje rad av CSS pålägg en separat rad . Börja och avsluta varje påstående med öppna och slutna parentes . " Position : absolut " betyder ställning elementet är absolut och inte ändras oavsett vad som händer i sidan . Bredden är satt till 20 procent av skärmen eller bin h1 -taggen är satt inuti , såsom en " div " eller " bord . " Stoppningen ger h1 taggen lite extra andrum . Den bakgrundsfärg sätter färg runt texten .
3
Skapa en triangulär " efter " pseudo - element för att lägga till din sidhuvudtagg . Den " efter " pseudo - elementet är nytt i CSS3 och låter dig placera ett element direkt efter en annan . Gör det till en triangel genom att ange fler än en av sina gränser till transparent . Din markup efter din
tag nu skulle se ut så här :
H1 : efter { position: absolute ; vänster : 0 , top : 100 % , border - width : 10px 10px ; border - style : solid , border - color : # 666 # 666 transparent transparent ;}
position och vänstra stil sätter triangeln längst ner till vänster på h1 . De översta och gränsar stilar ställa in storleken på triangeln . Gränsen - färg stil gör blocket visas som en triangel och gränsen - färgerna som visas är mörkare än färgen på huvudet , vilket skapar en 3D-effekt , som om huvudet blocket är kraftigt fällbart bakåt som ett band .
4
Lägg fler effekter med triangel element för att avsluta bandet utseendet på din header . Placera dessa sista trianglar i början av din header och i slutet , så att bandet har en flagga -liknande utseende . Din CSS pålägg visas nu i sin helhet som :
h1 { position: absolute ; width : 20% ; padding : 10px ; background- color : # 999 ; }
H1 : efter { position: absolute ; vänster : 0px ; top : 100 % , border - width : 10px 10px ; border - style : solid ; border - color : # 666 # 666 transparent transparent ;}
H1 : före { ställning : absolut , höger : 0px ; top : 0px ; border - color : transparent # fff transparent transparent ;}
h1: före { position: absolute ; vänster : - 30px ; top : 12px ; border - width : 20px 10px , border - color : # 999 # 999 # 999 transparent ;}
den första " : före "-element skapar en flagga - effekt på den högra sidan av huvudet . Den andra " : före " . Elementet skapar en flagga stil på tappade vänster i sidhuvudet
