Share
Eftersom CSS3 blir mer robust och är mer omfattande, kan alternativen för roliga moderna designelement som skapas utan grafik vara praktiskt taget obegränsade! För ett nytt projekt bestämde jag mig för att se om jag kunde skapa en centrerad bandbanner med ren CSS3. Denna handledning kommer att leda dig igenom hur det gjordes.
Som det visar sig är det faktiskt ganska enkelt, med bara enkel, semantisk HTML och lite CSS3-trickery tack vare den magiska gränsen breddegenskapen. Den enda försiktigheten: Som med alla nya CSS3-tekniker kan det verka lite wonky i vissa IE-webbläsare? Vi kommer att ta itu med det i slutet av handledningen.
Här är hur:
Vi vill skapa en navigeringslänk, så vi börjar med en enkel orörd lista [ul] med länkar inuti [a]. Detta är ett av de mest grundläggande byggstenarna i markup; bra för att skapa listor över element som ska utformas på ett liknande sätt som vi ska göra här:
Koden:
Vi vill att länkarna ska flyta horisontellt över hela sidan, så vi lägger till följande stilar:
Först vill vi ta bort kulformen från listobjekten och få dem att flyta till vänster om varandra och lägga till lite utrymme mellan dem.
#navigation li list-style: none; display: block; flyta till vänster; marginal: 1em;
Därefter lägger vi till lite textskuggning, tar bort länkens understreck och lägger till textfärg och -storlek.
#navigation li a text-shadow: 0 2px 1px rgba (0,0,0,0,5); display: block; text-dekoration: ingen; färg: # f0f0f0; fontstorlek: 1.6em; marginal: 0 .5em;
Jag gillar också att lägga till lite mjuka animeringseffekter på svävaren:
#navigation li a: hover margin-top: 2px;
För att lägga till stjärnorna har jag lagt en HTML-enhet ✭ (vilket ser ut så här?) inuti varje länk. Detta är rent dekorativt och inte nödvändigt för funktionaliteten.
Vid denna tidpunkt har vi redan en bra användbar navigationslänk som vi skulle kunna lägga till på en sida. Men vi ska fortsätta skapa ett fint band för att sätta dessa länkar inuti.
Den gränsbreddsteknik som vi ska använda kräver att vi lägger till 4 extra element i markeringen. Medan det inte är idealiskt att lägga till utomjordiska element, är det förmodligen ännu effektivare än att ladda upp extra grafik och vi kommer att hålla saker så enkelt som möjligt.
Först ska vi skapa ett containerelement runt länkarna. Detta gör det möjligt för oss att ställa in en bredd för att hålla alla banderollelementen ihop:
- ✭ länk 1
- ✭ länk 2
- ✭ länk 3
- ✭ länk 4
Vi lägger till följande stil för att ställa in bredden och centrera behållarelementet:
#navigation_container margin: 0 auto; bredd: 960px;
Därefter lägger vi till rektangeln som kommer att vara kroppsdelen av bandet:
- länk 1
- länk 2
- länk 3
- länk 4
Vi lägger till följande stilar för att skapa bandets bakgrund. Vi ställer in ett z-index på 500 eftersom rektangeln måste staplas ovanpå de trianglar som vi kommer att skapa nästa. Jag lägger till både -moz-box-skugga och boxskugga för att kunna redovisa Firefox respektive -webkit / IE9:
.rektangel bakgrund: # e5592e; höjd: 62px; position: relativ; -moz-box-skugga: 0px 0px 4px rgba (0,0,0,0,55); boxskugga: 0px 0px 4px rgba (0,0,0,0,55); -webkit-gränsen-radien: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px; z-index: 500; / * stapelordningen: förgrunden * / marginal: 3em 0;Därefter lägger vi trianglarna till kanterna av bandet:
- länk 1
- länk 2
- länk 3
- länk 4
Slutligen lägger vi till lite magiska gränser. Nyckeln till detta är att ställa in en gränsfärg av transparent för varje sida av elementet med undantag för botten (för de övre trianglarna) och toppen (för de nedre trianglarna). Sedan ställer vi en gränsvidd på 50px. Detta skapar en likriktad triangel, som vi sedan placerar bakom huvudbandet av bandet:
.l-triangle-top border-color: # d9542b transparent transparent; border-style: solid; border-width: 50px; höjd: 0px; bredd: 0px; position: relativ; flyta till vänster; topp: 1px; vänster: -50px; .l-triangle-bottom border-color: transparent transparent # d9542b; border-style: solid; border-width: 50px; höjd: 0px; bredd: 0px; position: relativ; flyta till vänster; topp: -40px; vänster: -150px;Vi gör samma för höger sida:
.r-triangle-top border-color: # d9542b transparent transparent; border-style: solid; border-width: 50px; höjd: 0px; bredd: 0px; position: relativ; float: right; höger: -45px; topp: -107px; .r-triangle-bottom border-color: transparent transparent # d9542b; border-style: solid; border-width: 50px; höjd: 0px; bredd: 0px; position: relativ; float: right; topp: -149px; höger: -145px;Och vi är klara! Detta kommer att göra perfekt i Firefox och Webkit webbläsare. IE är notoriskt dåligt att använda dessa CSS3 egenskaper, så det kommer inte att göra perfekt där, men vi gör vårt bästa för att få det ganska nära med ett par anpassade stylesheets.
För IE8 och IE9 lägger vi till några anpassade positioneringsregler genom "ie.css" stilark:
.l-triangel-topp vänster: 150px; topp: 50px; .l-triangeln-botten vänster: 50px; topp: -12px; .r-triangle-top .r-triangeln-botten top: -169px;Bara för att vara på den säkra sidan (och eftersom vi tror på progressiv förbättring) lägger vi också till en åtgärd för IE7, som kan placeras i antingen huvuddelen på din sida eller i ett separat IE7-stilark. Mitt val av en fix är att helt enkelt gömma trianglarna i webbläsare lägre än IE8. Egenskapen för webbläsarbredden stöds i IE7, men avståndet kommer att vara lite av. Det är upp till dig om du vill spendera extra tid ompositionering av elementen i IE7:
Wrapping It Up
Bakgrundsbilderna är bara för skojs skull - du kan lägga till din egen och bygga upp det här dokumentet? eller ta bara allt ovanför detta och släpp det i din egen design. Men, för att vara heltäckande, här är CSS som lägger till i dessa bilder:
html bakgrund: # 77d5fb url ('bottom_bg.jpg') bottom center no-repeat; kropp bakgrund: transparent url ('top_bg.png') top center no-repeat; bredd: 100%; höjd: 100%; marginal: 0 0;poäng: Bilderna är från iStockPhoto - vi kan inte distribuera den nedersta ön bilden med demoen, men du kan ta den själv här.
Det är allt!
Hoppas att ni har haft det här! Kom ihåg att det här är en ganska ny uppsättning tekniker? så om ditt mål är 100% stabilitet på alla webbläsare som är kända för människor, finns det mer stabila sätt att uppnå detta med hjälp av grundläggande bilder för bakgrunden. Lämna dina kommentarer och frågor nedan;)
Läs mer om att skapa ett band- eller vikningseffekt:
Skapa en 3D Ribbon Wrap-Around Effect (Plus en gratis PSD!)
Jag tyckte det var kul att skapa en handledning om den populära 3d Wrap-Around Ribbon-effekten som har dykt upp så mycket i år. Detta är ett utmärkt sätt att lägga djup i dina mönster, och det är ganska darn lätt att slutföra.
Besök posten
Snabbtips: Praktiska CSS-former
En gemensam designteknik på sistone är att skapa en vikningseffekt, där det verkar som om en rubrik sätter in sig bakom behållaren. Detta uppnås generellt genom användning av små bilder; Men med CSS kan vi efterlikna denna effekt ganska enkelt. Jag ska visa dig hur på fyra minuter.
Besök posten
Accentsconagua
