Share
Naarmate CSS3 robuuster wordt en meer wordt ondersteund, zijn de opties voor leuke, moderne ontwerpelementen die zonder grafische weergave kunnen worden gemaakt vrijwel onbeperkt! Voor een recent project heb ik besloten om te kijken of ik een gecentreerde lintbanner kon maken met pure CSS3. In deze zelfstudie leer je hoe het is gedaan.
Het blijkt eigenlijk vrij eenvoudig, met behulp van eenvoudige, semantische HTML en wat CSS3-bedrog dankzij de magie van de eigenschap border-width. De enige waarschuwing: zoals met alle nieuwe CSS3-technieken, kan het een beetje raar werken in sommige IE-browsers? we pakken dit aan het einde van de tutorial aan.
Hier is hoe:
We willen een navigatiebalk maken, dus we beginnen met een eenvoudige ongeordende lijst [ul] met links binnen [a]. Dit is een van de meest elementaire bouwstenen van markup; goed voor het maken van lijsten met elementen die op dezelfde manier moeten worden gestileerd als hier:
De code:
We willen dat de links horizontaal over de pagina zweven, dus we zullen de volgende stijlen toevoegen:
Ten eerste willen we de opsommingstekens van de lijstitems verwijderen en deze links van elkaar laten zweven, en een beetje ruimte tussen hen toevoegen.
#navigation li list-style: none; weergave: blok; zweven: links; marge: 1em;
Vervolgens voegen we een beetje tekstschaduw toe, verwijderen we de onderstreepte links en voegen we de tekstkleur en -grootte toe.
#navigation li a text-shadow: 0 2px 1px rgba (0,0,0,0.5); weergave: blok; tekstdecoratie: geen; kleur: # f0f0f0; font-size: 1.6em; marge: 0 .5em;
Ik wil ook een beetje zachte animatie-effecten toevoegen aan de hover:
#navigation li a: hover margin-top: 2px;
Om de sterren toe te voegen, heb ik een HTML-entiteit geplaatst ✭ (wat er zo uitziet?) in elke link. Dit is puur decoratief en niet nodig voor de functionaliteit.
Op dit moment hebben we al een handige, bruikbare navigatie-linksectie die we kunnen toevoegen aan een pagina. Maar we gaan door om een mooi lint te maken om deze links in te voegen.
De techniek voor de randbreedte die we gaan gebruiken, vereist dat we 4 extra elementen aan de markup toevoegen. Hoewel het niet ideaal is om externe elementen toe te voegen, is het op de lange termijn waarschijnlijk nog efficiënter dan het laden van extra afbeeldingen en houden we dingen zo eenvoudig mogelijk.
Eerst maken we een containerelement rond de links. Dit stelt ons in staat om een breedte in te stellen om alle bannerelementen bij elkaar te houden:
- ✭ link 1
- ✭ link 2
- ✭ link 3
- ✭ link 4
We voegen de volgende stijl toe om de breedte in te stellen en het containerelement te centreren:
#navigation_container margin: 0 auto; breedte: 960 px;
Vervolgens voegen we de rechthoek toe die het hoofdgedeelte van het lint zal zijn:
- link 1
- link 2
- link 3
- link 4
We zullen de volgende stijlen toevoegen om de lintlichaamachtergrond te maken. We stellen een z-index van 500 in omdat de rechthoek bovenop de driehoeken moet worden gestapeld die we vervolgens zullen maken. Ik voeg zowel -moz-box-shadow als box-shadow toe aan respectievelijk Firefox en -webkit / IE9:
.rechthoek background: # e5592e; hoogte: 62 px; positie: relatief; -moz-box-shadow: 0px 0px 4px rgba (0,0,0,0.55); box-shadow: 0px 0px 4px rgba (0,0,0,0.55); -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 3px; z-index: 500; / * de stapelvolgorde: voorgrond * / marge: 3em 0;Vervolgens voegen we de driehoeken toe aan de randen van het lint:
- link 1
- link 2
- link 3
- link 4
Ten slotte voegen we wat magie aan de randen toe. De sleutel hiervoor is het instellen van een randkleur van transparant voor elke zijde van het element, behalve de onderkant (voor de bovenste driehoeken) en de bovenkant (voor de onderste driehoeken). Vervolgens stellen we een grensbreedte van 50 px in. Dit creëert een gelijkbenige driehoek, die we dan achter het hoofdgedeelte van het lint plaatsen:
.l-triangle-top border-colour: # d9542b transparant transparant; border-style: solid; border-width: 50px; height: 0px; width: 0px; positie: relatief; zweven: links; top: 1px; links: -50px; .l-triangle-bottom border-color: transparent transparent # d9542b; border-style: solid; border-width: 50px; height: 0px; width: 0px; positie: relatief; zweven: links; top: -40px; links: -150 px;We doen hetzelfde voor de rechterkant:
.r-triangle-top border-colour: # d9542b transparant transparant; border-style: solid; border-width: 50px; height: 0px; width: 0px; positie: relatief; zweven: rechts; rechts: -45px; top: -107px; .r-triangle-bottom border-color: transparent transparent # d9542b; border-style: solid; border-width: 50px; height: 0px; width: 0px; positie: relatief; zweven: rechts; top: -149px; rechts: -145 px;En we zijn klaar! Dit wordt perfect weergegeven in Firefox- en Webkit-browsers. IE is notoir slecht in het gebruik van deze CSS3-eigenschappen, dus het wordt daar niet perfect weergegeven, maar we zullen ons best doen om het met een paar aangepaste stylesheets vrij dicht te krijgen.
Voor IE8 en IE9 voegen we enkele aangepaste positioneringsregels toe via de stylesheet "ie.css":
.l-driehoek-top links: 150px; top: 50px; .l-triangle-bottom left: 50px; top: -12px; .r-triangle-top .r-triangle-bottom top: -169px;Voor de zekerheid (en omdat we geloven in progressieve verbetering), voegen we ook een oplossing toe voor IE7, die in het hoofdgedeelte van uw pagina of in een afzonderlijke IE7-stylesheet kan worden geplaatst. Mijn keuze voor een oplossing is om de driehoeken eenvoudig te verbergen in browsers die lager zijn dan IE8. De eigenschap browser-width wordt ondersteund in IE7, maar de spatiëring zal een beetje afwijken. Het is aan jou of je de extra tijd wilt besteden aan het herpositioneren van de elementen in IE7:
Inpakken
De achtergrondafbeeldingen zijn gewoon voor de lol - je kunt je eigen afbeeldingen toevoegen en rond dit document bouwen? of pak alles hierboven en laat het in je eigen ontwerp vallen. Maar in het belang van allesomvattend te zijn, hier is de CSS die deze afbeeldingen toevoegt:
html background: # 77d5fb url ('bottom_bg.jpg') midden in de onderrand no-repeat; body background: transparent url ('top_bg.png') top-centrum no-repeat; breedte: 100%; hoogte: 100%; marge: 0 0;credits: De afbeeldingen zijn afkomstig van iStockPhoto - we kunnen de afbeelding van het onderste eiland niet met de demo verspreiden, maar u kunt het hier voor uzelf bemachtigen.
Dat is het!
Ik hoop dat jullie hier van genoten hebben! Bedenk dat dit een vrij nieuwe reeks technieken is? dus als je doel 100% stabiliteit is in alle browsers die de mens kent, zijn er stabielere manieren om dit te bereiken door basisafbeeldingen voor de achtergrond te gebruiken. Laat hieronder uw opmerkingen en vragen achter;)
Meer informatie over het maken van een lint- of vouweffect:
Maak een 3D-lintomslageffect (plus een gratis PSD!)
Ik dacht dat het misschien leuk zou zijn om een tutorial te maken over het populaire 3D Wrap-around-linteffect dat dit jaar zo vaak opduikt. Dit is een geweldige manier om diepte toe te voegen aan je ontwerpen en het is vrij eenvoudig om te voltooien.
Bezoek de post
Snelle tip: praktische CSS-vormen
Een veelgebruikte ontwerptechniek is de laatste tijd om een vouweffect te creëren, waarbij het lijkt alsof een kop zich achter de container bevindt. Dit wordt meestal bereikt door het gebruik van kleine afbeeldingen; Met CSS kunnen we dit effect echter vrij eenvoudig nabootsen. Ik zal je laten zien hoe in vier minuten.
Bezoek de post
Accentsconagua
