Blur-effect met CSS I: Bijschrift aan de onderkant

Hieronder zie je een foto, met mooi afgeronde hoeken. Onderaan de foto is er een half-doorschijnend blok waarin een titel staat en een korte beschrijving. Daarboven is een smalle band te zien waarin de foto is vervaagd.

Op deze pagina wordt beschreven hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.

Dit is een bewerking van een deel van script dat ik aantrof in het blad Webdesigner Magazine nr. 98 (september 2017), pagina 18 t.m. 20. Voor deze pagina is één van de drie mogelijkheden uit de code genomen; zie ook de opmerking onderaan deze bladzijde. Voor deze webpagina is de CSS opgeschoond; overbodige zaken zijn verwijderd. Een fout in de code, waardoor de vervaagde horizontale band niet zichtbaar is, is verbeterd.
Webdesigner Magazine wordt sinds eind november 2017 niet meer gemaakt.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De werking van het script
• De code bestaat uit HTML en CSS (in de file styles.css). JavaScript wordt hier niet gebruikt.
   
• HTML
• De HTML bestaat uit een aantal geneste <div>-tags, met daarbinnen nog wat tags en tekst om de bijschriften zichtbaar te maken.
• De buitenste <div>-tag heeft de klassen blur-container en fullwidth-caption.
• De klasse blur-container bepaalt de afmetingen van de afbeelding in het document, maakt de afgeronde hoeken en houdt de verder genoemde <div>-tags bij elkaar.
  De klasse fullwidth-caption doet hetzelfde voor het bijschrift.
• Binnen de blur-container is er als eerste een <div>-tag met de klasse blur-image. Deze bevat de door CSS vervaagde foto als achtergrond. Deze tag blijft verder leeg.
• Daarna is er een <div>-tag met de klasse sharp-container. Deze houdt de niet-vervaagde foto op de goede plaats. Hierbinnen staat de <div>-tag met de klasse sharp-image. Deze bevat dezelfde foto als blur-image, maar die wordt niet vervaagd. De klassen blur-image en sharp-image liggen bovenop elkaar. Doordat de hoogte van sharp-image kleiner is dan de hoogte van blur-image ontstaat de vervaagde band.
• Tenslotte is er een <div>-tag met de klasse caption. Die toont het blok met het onderschrift, dat is gemaakt met <h3> en <p>.
   
• CSS
• Praktisch gezien is de gedeeltelijk vervaagde foto opgebouwd uit twee lagen:
  
  1. De vervaagde foto. Dit is de achtergrond van de klasse blur-image.
  2. •  De niet vervaagde foto. Dit is de achtergrond van de klasse sharp-image, die bovenop blur-image ligt, maar minder hoog is.
     •  Het onderschrift in de klasse caption, dat aan de onderkant van blur-image is vastgepind. Doordat de hoogte van caption + de hoogte van sharp-image kleiner is dan de hoogte van blur-image, ontstaat de (smalle) vage band tussen de scherpe foto en het onderschrift.
   
• De opzet van de CSS lijkt wat chaotisch, maar is logisch als je bedenkt dat de verschillende elementen op elkaar gestapeld liggen en daardoor veel dezelfde eigenschappen hebben.
  Hieronder worden de selectoren per klasse behandeld.
   
• Klasse .blur-container: De breedte is 550px, de hoogte is 500px. De de onder- en bovenmarges zijn elk 20 px en de marges links en rechts zijn 'auto', zodat de foto netjes wordt gecentreerd in het document. De straal van de afronding is 20px. De position is relative, zodat de foto verschijnt op de plaats waar je hem in de HTML neerzet. De overflow is hidden, zodat delen van de foto die uitsteken buiten de weergave worden verborgen.
• Klasse .blur-image: De afmetingen, de marges en de afronding zijn gelijk aan die bij blur-container. De achtergrond wordt ingesteld met een url()-function en wordt horizontaal en verticaal gecentreerd in de weergave geplaatst. De achtergrondfoto wordt met het filter blur() vervaagd. De blur-radius is 5px.
• Klasse .sharp-image: Hiervoor geldt hetzelfde als voor blur-image, zij het dat hier geen filter wordt toegepast. Verderop worden ook nog eigenschappen ingesteld in combinatie met fullwidth-caption.
• Klasse .caption: De , de kleur en de marges worden ingesteld. De lettergrootte van h3 en p voor zover die binnen deze klasse vallen worden ingesteld. Verderop worden ook nog eigenschappen ingesteld in combinatie met fullwidth-caption.
• Klasse .fullwidth-caption .sharp-container: De eigenschappen van de klasse sharp-container gelden alleen binnen fullwidth-caption (er staat geen komma in de selector!). De breedte is 550px, net als bij blur-container. De hoogte is echter 365px. Doordat overflow: hidden is gebruikt, wordt maar een deel van de (scherpe) foto getoond. De vervaagde foto heeft top: 0 en left: 0. De scherpe foto heeft echter top: -5px. Dit is om een zij-effect van het blur-filter op te vangen. De scherpe foto is omhoog geschoven over een afstand die gelijk is aan de straal in het blur-filter. Er ontstaat anders een vage rand aan de bovenkant van de foto en dat is niet mooi.
  De position is absolute, maar bedenk dat dit binnen blur-container wordt gerekend.
• Klasse .fullwidth-caption .sharp-image: De hier gedefinieerde eigenschappen van de klasse sharp-image gelden alleen binnen fullwidth-caption (er staat geen komma in de selector!).Ook hier is position: absolute ingesteld, in combinatie met top: 0 en left: 0.
• Klasse .fullwidth-caption .caption: De hier gedefinieerde eigenschappen van de klasse caption gelden alleen binnen fullwidth-caption (er staat geen komma in de selector!).
  De breedte is 100% (van .blur-container), in dit geval dus 550px. De hoogte is 90px. Dit blok is aan de onderkant van .blur-container vastgemaakt (bottom: 0).
   
• Toepassen in je eigen site
• Regel een mooie foto. Het hoofd-onderwerp van de foto moet ongeveer in het midden (op het snijpunt van de diagonalen) staan.
• Bepaal de hoofdafmetingen van de foto met het effect in je document.
• Download de .zip-file en pak hem uit. Zet de HTML in de head en de body van je document, zoals hieronder is aangegeven.
• Zet het pad naar de foto in de CSS, in de selector .blur-image, .sharp-image.
• Zet de hoogte en de breedte van de container in de selector .blur-container. Zet de breedte ook in .fullwidth-caption .sharp-container.
• Zet de hoogte van de scherpe foto in .fullwidth-caption .sharp-container
• Zet de hoogte van het onderschrift in .fullwidth-caption .caption.
• Pas overige CSS aan, naar je eigen smaak: font-family, font-size, kleuren, marges, paddings, enz.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">

(Zet dit in de <BODY> op de plaats waar de foto moet verschijnen).

<div class="blur-container fullwidth-caption">
  <div class="blur-image"></div>

  <div class="sharp-container">
    <div class="sharp-image"></div>
  </div>
  <div class="caption">
    <h3>Vlinder</h3>
    <p>Opgenomen in de Vlindertuin op Texel, op 18 mei 2015</p>
  </div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb244.zip, 896 bytes.

Opmerking:
 
Een variant van dit voorbeeld is: Blur-effect met CSS II: Bijschrift aan de linkerkant. Een derde variant is: Blur-effect met CSS III: Ronde uitsnede met bijschrift.