Voeg een Css-blu­re fect toe

Web Designer Magazine - - Inhoud -

Licht een deel van een fo­to uit met CSS en HTML en zet dat in­clu­sief bij­schrift op je si­te.

Ge­bruik CSS en HTML om een deel van een fo­to uit te lich­ten en in­clu­sief bij­schrift op je si­te te zet­ten.

In de­ze tutorial leer je hoe je met al­leen HTML en CSS een deel van een fo­to kunt blur­ren, dank­zij Css-blur il­ters. Door elementen over el­kaar heen te leg­gen, kun je een sa­men­ge­stel­de a beel­ding ma­ken met een ge­blurd en een on­ge­blurd deel en daar over­heen nog een bij­schrift. Dat kan han­dig zijn, voor­al in een CMS, waar de klant niet al­tijd zelf zijn fo­to’s kan be­wer­ken. Je kunt een fo­to na­me­lijk aan­pas­sen aan de uni­ver­se­le con­tainer­groot­te en het e ect au­to­ma­tisch toe­pas­sen zon­der dat er beeld­be­wer­king aan te pas komt.

Om­dat up-to-da­te brow­sers nog steeds de trend vol­gen om de nieuw­ste Css-func­ti­o­na­li­teit in te bou­wen, wor­den blur il­ters steeds be­ter bruik­baar als de­sig­nop­tie met al­leen CSS. Voor brow­sers zo­als IE10 en IE11, die de hui­di­ge Cssstan­daard niet on­der­steu­nen, is er een stijl­vol­le fall­back voor dit e ect waar­bij de blur ach­ter­we­ge blijft.

Hier la­ten we zien hoe je een ver­sie met vas­te groot­te maakt die de mees­te brow­sers en desktop­scher­men on­der­steu­nen. Met een paar me­diaque­ries kun je het e ect aan­pas­sen voor klei­ne­re scher­men. Als je de ba­sis een­maal door hebt, kun je de­zelf­de elementen aan­pas­sen met CSS voor al­ler­lei ver­ge­lijk­ba­re e ec­ten met bij­schrif­ten en blurs. Aan het eind van de­ze tutorial ge­ven we daar een mooi voor­beeld van.

1. Html-ba­sis

Om dit e ect te krij­gen, moet je eerst wat Ht­ml­struc­tuur aan­bren­gen. Be­gin met vier di­vs, ge­nest zo­als hier­on­der. Twee daar­van ge­bruik je als con­tai­ners om de fo­to’s op hun plaats te hou­den en in de an­de­re ko­men de ge­blur­de en on­ge­blur­de fo­to’s zelf. | <div class=”blur-con­tai­ner”> | <div class=”blur-ima­ge”> | </div> | <div class=”cir­cle-con­tai­ner”> | <div class=”cir­cle-ima­ge”> | </div> | </div> | </div>

2. Be­paal fo­to­groot­te

Nu leg je de ba­sis in de CSS. Je moet de groot­te van de fo­to-di­vs en de blur­con­tai­ner be­pa­len. Je ziet dat de di­vs op­sta­pe­len en veel ruim­te in­ne­men. Waar­schijn­lijk zijn het nu le­ge ka­ders. Dat los je bin­nen een paar stap­pen op. | .blur-con­tai­ner, | .blur-ima­ge, | .cir­cle-ima­ge { | width: 800px; | height: 600px; | }

3. Voeg con­tai­ner­po­si­tie toe

Om de fo­to’s bin­nen­in la­ter goed te kun­nen po­si­ti­o­ne­ren, moet je de div er­om­heen po­si­ti­on: re­la­ti­ve; ge­ven. Zo krij­gen de on­der­lig­gen­de di­vs een re­fe­ren­tie waar ze moe­ten uit­lij­nen als je ze la­ter een ab­so­lu­te po­si­tie geeft. | .blur-con­tai­ner { | po­si­ti­on: re­la­ti­ve; | }

4. Voeg fo­to’s toe

Nu ga je fo­to’s toe­voe­gen. Pas de vol­gen­de stij­len toe op de con­tai­ners blur-ima­ge en cir­cle-ima­ge. De re­den dat we hier div-back­grounds voor ge­brui­ken en geen Html-ima­ges is dat je de fo­to’s aan de uni­for­me con­tainer­groot­te wilt kun­nen kop­pe­len met de pa­ra­me­ter back­ground-si­ze. | .blur-ima­ge, | .cir­cle-ima­ge { | back­ground: url(‘good­boy.jpg’) cen­ter | cen­ter; | back­ground-si­ze: co­ver; | }

5. Maak een cir­kel

Maak het cir­ke­le ect door de bor­der-ra­di­us op 50% te zet­ten en zo de hoe­ken van de div af te ron­den tot een per­fec­te cir­kel. Geef de breed­te en hoog­te ge­lij­ke waar­den (tenzij je een ovaal wilt). Voor dit voor­beeld is de cir­kel klei­ner ge­hou­den dan de con­tai­ner, zo­dat hij in het mid­den ge­plaatst kan wor­den. | .cir­cle-con­tai­ner { | width: 500px; | height: 500px; | bor­der-ra­di­us: 50%; | }

6. Maak de cir­kel op

Voeg met bor­ders wat ex­tra op­maak toe aan de de ini­tie van cir­cle-con­tai­ner. We kie­zen hier een door­lo­pen­de rand van 2 pixels, maar je kunt ex­pe­ri­men­te­ren met dik­te, kleur en stijl. Met over­flow:

hi­d­den houd je de ran­den van de cir­cle-ima­ge-div bin­nen de cir­kel. De rest van de fo­to blijft on­zicht­baar. | .cir­cle-con­tai­ner { | /* eer­de­re re­gels hier */ | bor­der: 2px so­lid #ffffff; | over­flow: hi­d­den; | box-si­zing: bor­der-box; | }

7. Po­si­ti­o­neer de cir­kel

Nu moet je zor­gen dat de cir­kel op de juis­te plaats bo­ven­op de fo­to komt. Daar­voor voeg je nog wat re­gels toe aan de de­cla­ra­tie van de cir­cle-con­tai­ner. Door top en left op 50% te zet­ten en dan ne­ga­tie­ve mar­ges half zo groot als de fo­to te ge­brui­ken, komt de cir­kel in het mid­den. | .cir­cle-con­tai­ner { |

/* eer­de­re re­gels hier */

| po­si­ti­on: ab­so­lu­te; | top: 50%; | left: 50%; | mar­gin-top: -250px; | mar­gin-left: -250px; | }

8. Po­si­ti­o­neer de cir­kel­fo­to

De over­lay-fo­to zit in de cir­kel op het mid­den van de achtergrond, maar hij staat op de verkeerde plek. De cir­cle-con­tai­ner heeft een ab­so­lu­te po­si­tie, dus de lin­ker­bo­ven­hoek van de cir­cle-ima­ge moet ge­kop­peld wor­den aan de bo­ven- en lin­ker­kant van de cir­kel. Po­si­ti­o­neer de fo­to met een ne­ga­tie­ve top en left zo­dat hij over­een­komt met de achtergrond. | .cir­cle-ima­ge { | po­si­ti­on: ab­so­lu­te; | top: -52px; | left: -152px; | }

9. Voeg blur toe

Nu al­le elementen op de juis­te plaats staan, is het tijd om de blur toe te voe­gen. Met dit e ect ver­vaag je de he­le div met alles wat er­in zit. Daar­om is de cir­kel-div geen kind van de blur-ima­ge, maar een broer. De ran­den ver­schij­nen nu ook ge­blurd, maar dat los je op in de vol­gen­de stap. | .blur-ima­ge { | -web­kit-fil­ter: blur(5px); | fil­ter: blur(5px); | fil­ter: pro­gid:dxima­ge­trans­form. | Mi­cro­soft.blur(pixel­ra­di­us=’5’); | }

10. Snij va­ge ran­den af

Ge­bruik over­flow: hi­d­den voor de blur-con­tai­ner om te zor­gen dat het blu­re ect bin­nen de gren­zen van de con­tai­ner blijft. De ran­den blij­ven nog steeds een beet­je vaag, maar dat ver­help je in de vol­gen­de stap. | .blur-con­tai­ner { | /* eer­de­re re­gels hier */ | over­flow: hi­d­den; | }

11. Maak de ran­den ex­tra scherp

Met de sca­le-trans­for­ma­tie kun je de elementen bin­nen de con­tai­ner mi­ni­maal ver­gro­ten om ook het laat­ste beet­je blur aan de rand te ver­wij­de­ren. Met over­flow: hi­d­den wordt de over­loop er­af ge­knipt en met sca­le wordt de con­tent in al­le rich­tin­gen iets op­ge­bla­zen. | .blur-ima­ge, | .cir­cle-ima­ge { | /* eer­de­re re­gels hier */ | trans­form: sca­le(1.03); | }

12. Tus­sen­stand

Het over­lay-e ect met de ge­blur­de cir­kel is nu klaar. Door de hoog­tes en breed­tes aan te pas­sen kun je de groot­te en po­si­tie van de cir­kel aan­pas­sen, of de to­ta­le groot­te van de fo­to. Ver­geet niet om de rest van de po­si­tie­re­gels te be­wer­ken zo­dat ze aan­slui­ten bij de groot­te­ver­schil­len.

13. Voeg een bij­schrift toe

Om een bij­schrift toe te voe­gen, moet je eerst de be­no­dig­de HTML in de blur­con­tai­ner zet­ten als broer van de di­vs voor blur-ima­ge en cir­cle-con­tai­ner. Om te be­gin­nen ver­schijnt het bij­schrift on­der de fo­to, maar wordt hij af­ge­sne­den door de over­low: hi­d­den van de blur-con­tai­ner. | <div class=”blur-con­tai­ner”> | <!-- an­de­re di­vs hier --> | <div class=”cap­ti­on”> | <h3>wie is er een bra­ve jon­gen?</h3> | <p>we­sley weet wel wie de bra­ve jon­gen | is</p> | </div> | </div>

14. Po­si­ti­o­neer het bij­schrift

Geef het bij­schrift een ab­so­lu­te po­si­tie bo­ven­op de fo­to. Ook de­ze gaat uit van de blur-con­tai­ner-div om zijn po­si­tie te be­pa­len en niet van het do­cu­ment­ven­ster. bottom: 30px be­te­kent dus 30 pixels van­af de on­der­kant van de blur-con­tai­ner. De tekst is nu nog niet zo lees­baar, voeg hier­na daar­om een achtergrond toe. | .cap­ti­on { | po­si­ti­on: ab­so­lu­te; | bottom: 30px; | left: 0px; | }

15. Achtergrond voor bij­schrift

Voeg nog een re­gel aan .cap­ti­on toe om het bij­schrift een achtergrond te ge­ven. Met rg­ba kun je trans­pa­ran­tie in­stel­len voor de achtergrond. Zo springt de tekst er­uit, maar kun je de fo­to er nog steeds door­heen zien. Het ziet er een beet­je krap uit, dus in de vol­gen­de stap voeg je wat ruim­te toe. | .cap­ti­on { | /* eer­de­re re­gels hier */ | back­ground: rg­ba(255, 255, 255, 0.7); | }

16. Ruim­te voor bij­schrift

Geef het bij­schrift meer ruim­te met wat pad­ding en stel de breed­te in om te voor­ko­men dat het te ver over de fo­to loopt. Als het bij­schrift bij som­mi­ge fo­to’s lan­ger is, zal het bij­schrift­vak naar bo­ven toe uit­brei­den. De ruim­te aan de on­der­kant en de breed­te blij­ven daar­bij ge­lijk. | .cap­ti­on { | /* eer­de­re re­gels hier */ | width: 35%; | pad­ding: 20px; | }

Au­teur Sa­rah May­nard

Newspapers in Dutch

Newspapers from Netherlands

© PressReader. All rights reserved.