Zo maak je een vloei­baar ach­ter­grond­ef­fect met CSS

Met Css-tran­si­ties maak je een vloei­baar ach­ter­grond­ef­fect dat op een hover-event re­a­geert

Web Designer Magazine - - Lightbox -

1. Do­cu­ment­struc­tuur

Bij de eer­ste stap de­fi­ni­eer je de do­cu­ment­struc­tuur van het Html-do­cu­ment en de sec­ties voor de head en bo­dy. In de head-sec­tie zet je de be­schrij­vin­gen van het do­cu­ment en links naar ex­ter­ne bron­nen – een Css-be­stand in dit ge­val. In de bo­dy zet je de zicht­ba­re ele­men­ten van de con­tent die je bij de vol­gen­de stap toe­voegt. <!DOCTYPE html> <html> <head> <tit­le>li­quid Back­ground</tit­le> <link rel=”sty­les­heet” ty­pe=”text/css” h ref=”sty­les.css” /> </head> <bo­dy> *** STAP 2 </bo­dy> </html>

2. Na­vi­ga­tie­con­tent

Het voor­beeld heeft een na­vi­ga­tie­me­nu waar­op het vloei­ba­re ef­fect wordt toe­ge­past als een ge­brui­ker er met de muis bo­ven zweeft. Het me­nu be­staat uit een nav-con­tai­ner met een aan­tal links voor de na­vi­ga­tie. Het is be­lang­rijk dat je de nav-con­tai­ner be­gint met twee span-ele­men­ten – die gebruik je straks voor het ani­ma­tie-ef­fect. Gebruik een der­de span-ele­ment als con­tai­ner voor de links. <nav> <span></span> <span></span> <span> <a href=”#first”>op­ti­on</a> <a href=”#se­cond”>op­ti­on</a> <a href=”#third”>op­ti­on</a> </span> </nav>

3. Sty­les­heet

Nu het Html-do­cu­ment klaar is, maak je de sty­les­heet sty­les.css waar­in je de op­maak­re­gels zet. Met de eer­ste re­gels van de co­de stel je in dat de con­tent de ge­he­le web­pa­gi­na vult, met stan­daard een zwar­te tekst op een wit­te ach­ter­grond. html,bo­dy{ dis­play: block; width: 100%; height: 100%; mar­gin: 0; pad­ding: 0; font-fa­mi­ly: Hel­ve­ti­ca, sans-se­rif; back­ground: #fff; co­lor: #000; }

4. Na­vi­ga­tie­con­tai­ner

Stel de na­vi­ga­tie­con­tai­ner in op een spe­ci­fie­ke hoog­te en de vol­le­di­ge breed­te van de be­schik­ba­re ruim­te. Met wat pad­ding zorg je er­voor dat de con­tent van de con­tai­ner niet te­gen de rand aan­komt. Stel een re­la­tie­ve po­si­tie in, zo­dat de ani­ma­tie al­leen in de na­vi­ga­tie­con­tai­ner plaats­vindt en niet het he­le scherm vult. nav{ po­si­ti­on: re­la­ti­ve; dis­play: block; width: 100%; pad­ding: 2em; text-align: cen­ter; }

5. Vloei­ba­re ele­men­ten

Maak dan een vloei­ba­re ani­ma­tie van de eer­ste twee ele­men­ten in de na­vi­ga­tie­con­tai­ner. Je ver­wijst daar met de se­lec­tor nth-child naar, waar­in je ver­schil­len­de weer­ga­ve­re­gels voor de child­ren 1 en 2 ge­bruikt. Stel die ele­men­ten zo in dat ze ver­schij­nen met een ron­de rand, een spe­ci­fie­ke be­gin­po­si­tie en een zwar­te ach­ter­grond. Voeg een tran­si­tie toe, zo­dat de ver­an­de­rin­gen aan hun height- en top-po­si­ties ge­a­ni­meerd wor­den. nav > *:nth-child(1), nav > *:nth-child(2){ dis­play: block; po­si­ti­on: ab­so­lu­te; top: -2em; left: 0; z-in­dex: 0; width: 100%; back­ground: #000; bor­der-bottom-left-ra­di­us: 100%; bor­der-bottom-right-ra­di­us: 100%; height: 0em; tran­si­ti­on: height 3s, top 5s; }

6. Vloei­ba­re aan­pas­sin­gen

Je moet het twee­de child in de nav-con­tai­ner 180 gra­den draai­en, zo­dat die pre­cies het om­ge­keer­de wordt van het bo­ven­ste ele­ment en die on­der­aan het nav-me­nu komt. Je ac­ti­veert het ani­ma­tie-ef­fect door de hoog­te van zo­wel het eer­ste als het twee­de child-ele­ment te ver­an­de­ren wan­neer de muis bo­ven hun pa­rent zweeft. nav > *:nth-child(2){ trans­form: ro­ta­te(180deg); top: un­set; bottom: 0; } nav:hover > *:nth-child(1), nav:hover > *:nth-child(2){

height: 175%; }

7. Link­con­tai­ner

In het der­de ele­ment in de nav-con­tai­ner staan de na­vi­ga­tie­links. Hier­mee voor­kom je dat de links con­flic­te­ren met de eer­ste twee child-ele­men­ten die voor het vloei­ba­re ef­fect wor­den ge­bruikt. Stel de der­de con­tai­ner zo in dat hij de vol­le­di­ge breed­te van het na­vi­ga­tie­me­nu in­neemt en een ho­ge­re zin­dex heeft dan de vloei­ba­re ani­ma­tie-ele­men­ten. nav > *:nth-child(3){ dis­play: block; po­si­ti­on: ab­so­lu­te; width: 100%; text-align: cen­ter; z-in­dex: 2; }

8. Na­vi­ga­tie­links

Maak de na­vi­ga­tie­links stan­daard zwart, maar laat ze ver­an­de­ren naar wit wan­neer een ge­brui­ker met de muis bo­ven de pa­rent nav-con­tai­ner zweeft. Hier­mee voor­kom je dat de tekst on­lees­baar wordt wan­neer de ach­ter­grond­kleur het­zelf­de is als de tekst­kleur. nav a{ co­lor: #000; tran­si­ti­on: co­lor 5s; text-de­co­ra­ti­on: no­ne; pad­ding: 1em 2em; mar­gin-right: 1em; } nav:hover a{

co­lor: #fff; } nav > a:hover{

bor­der-bottom: .5em so­lid #c00; }

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.