Afbeelding met geblurde achtergrond II
Op TV zie je wel eens foto's of filmpjes die lijken te zijn gemaakt met een mobiele telefoon, in staand formaat. Op de
achtergrond zie je dan hetzelfde, vergroot en onscherp (geblurd).
In het item Afbeelding met geblurde achtergrond wordt een techniek besproken die
zoiets doet, waarbij de geblurde achtergrond is gemaakt met twee kopieën van de foto.
Op deze pagina presenteer ik een variant die het doet met één kopie van de foto. De code kun je downloaden om zelf te gebruiken, inclusief de afbeelding.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De inspiratie voor dit item is ontstaan door het item Afbeelding met geblurde achtergrond.
- Deze code is een variant van de code uit het item Vervaagde afbeelding
met rond detail er bovenop.
- De werking van het script
- De code bestaat uit HTML en CSS, die bij het laden van de pagina direct wordt uitgevoerd. JavaScript wordt hierbij niet
gebruikt.
- HTML
- De HTML bestaat uit een met de klasse wrapper. Deze positioneert het geheel in de regel en houdt de onderdelen bij elkaar.
- Binnen wrapper zijn er twee <img>-tags met de klassen Achtergrond resp. Rechthoek. Beide
tags tonen dezelfde foto. In Achtergrond is de foto een factor 3 vergroot. In Rechthoek is de foto op ware grootte.
- CSS
- De klasse wrapper positioneert het effect in het midden van de regel via margin:0 auto.
De breedte van wrapper is gelijk aan drie maal de breedte van de foto. De hoogte is gelijk aan de hoogte van de foto. Met overflow:hidden wordt het deel van de vervaagde achtergrond dat buiten de grenzen van wrapper valt, onzichtbaar gemaakt. - De afbeelding met klasse Rechthoek wordt absoluut in wrapper gepositioneerd. Daarbij wordt margin niet gebruikt, maar het het gaat hier met top en left. De zwarte randen links en rechts van de foto worden gemaakt met border-left en border-right.
- De achtergrondfoto, met klasse Achtergrond, wordt absoluut in wrapper gepositioneerd. De linker bovenhoek
van Achtergrond bevindt zich op 160px boven de linker bovenhoek van wrapper, dat is de helft van de hoogte van
Rechthoek. De hoogte en breedte van Achtergrond zijn elk drie maal de hoogte en breedte van Rechthoek.
Hierdoor ontstaat het de vergroting. De achtergrond wordt daarna vervaagd met het filter:blur(6px).
- Toepassen in je eigen site
- Regel een afbeelding met hoogte-breedte verhouding 16 : 9, in staand formaat. Gebruik een fotobewerkingsprogramma om de afmetingen aan te passen. De hoogte van de foto moet gelijk zijn aan de hoogte van het effect op je web-pagina die je wilt gaan maken.
- Download de .zip-file en pak hem uit. Bouw de code op zoals hieronder is aangegeven.
- Verander de naam van het fotobestand in de HTML.
- Als je andere afmetingen wilt gebruiken dan in het voorbeeld, moet ook de CSS ook worden aangepast, en wel als volgt:
• wrapper: width is 3× de breedte van de foto. height is gelijk aan de hoogte van de foto.
• Achtergrond: width en height zijn gelijk 3× de breedte resp. de hoogte van de foto. top is −½×hoogte van de foto.
• Rechthoek: width en height zijn gelijk aan afmetingen van de foto. left is gelijk aan de breedte van de foto.
- Tenslotte...
- Er zijn <img>-tags gebruikt voor de foto's. In theorie zou dat ook moeten kunnen met de CSS-eigenschap background-image, maar dat werkt niet goed als er klassen boven op elkaar worden gelegd, in combinatie met filter:blur().
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 het effect moet verschijnen.)
<div class="wrapper">
<img class="Achtergrond" src="orchidee.jpg">
<img class="Rechthoek" src="orchidee.jpg">
</div> <!-- wrapper -->
Downloaden:
Druk op de knop:
File: voorb822.zip, 21 399 bytes.
