Afbeelding met eenvoudig masker
De foto hierboven is afgedekt met een masker. Op deze pagina wordt getoond hoe je dat maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
- Inspiratie voor dit item is ontstaan door een toepassing op internet. Voor deze site heb ik het nagebouwd.
- De werking van het script
- Tijdens het laden van de pagina wordt de foto in het document geplaatst, met het masker (ook een afbeelding) daar pal
bovenop. Daar wordt een vermenging ('blend') op toegepast.
- HTML
- De HTML van het voorbeeld bestaat uit twee geneste <div>-tags, met klasse masker1 resp. masker2
- CSS
- De klasse masker1 positioneert de foto binnen het document en legt de afmetingen vast. De foto zit in de achtergrond met background-image:url('…').
- De klasse masker2 staat in de HTML binnen masker1. De afmetingen worden vastgelegd. De afbeelding die het
masker vormt zit in de achtergrond met background-image:url('…'). Daarbij bevat masker2 de regel
mix-blend-mode:screen. Dat zorgt voor het effect.
- De oorspronkelijke foto en het masker worden hieronder (verkleind) getoond. mix-blend-mode:screen maakt de zwarte
delen van het masker transparant, de witte delen van het masker blijven ondoorzichtig. Zo ontstaat het effect.
Behalve screen heeft mix-blend-mode meer mogelijkheden, zie de beschrijving op w3schools.com.
- Een effect zoals hieronder is met mix-blend-mode niet mogelijk, tenzij de achtergrond van je document wit is. Als
je dit wilt realiseren op een geleurde achtergrond, zoals op deze pagina, ben je aangewezen op een afbeelding in .PNG- of
.GIF-formaat. Het masker maak je met fotobewerkingssoftware en alles wat buiten het masker valt maak je transparant.
- Toepassen in je eigen site
- Regel een foto en maak een masker. Zorg dat ze allebei en groot zijn. De transparante delen van het masker moeten zwart zijn, de rest blijft wit.
- De foto en het masker mogen verschillende bestandsformaten hebben, allebei .jpg zoals op deze site, is niet nodig.
- Download de zip-file en pak hem uit. Zet de code in het document zoals hieronder is aangegeven.
- Pas width en height in de klassen masker1 en masker2 aan, aan de afmetingen van de foto en het masker. Doe dat ook met background-image:url('…') voor de foto in masker1 het masker in masker2. Positioneer het effect in de regel door margin te veranderen in masker1.
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>).
<style>
.masker1 {
margin:0 auto;
width:300px; height:225px;
background-image:url('foto.jpg');
}
.masker2 {
width:300px; height:225px;
background-image:url('masker.jpg');
mix-blend-mode:screen;
}
(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen.)
<div class="masker1"><div class="masker2"></div></div>
Downloaden:
Druk op de knop:
File: voorb773.zip, 376 bytes.
