Kleuren aanpassen met CSS blend-mode
Hier onder zie je twee dezelfde foto's. De linker is "normaal", over de rechter ligt een diep-paarse gloed.
Op deze pagina word uitgelegd hoe je zoiets maakt. De code, behalve de foto, kun je downloaden om zelf mee te experimenteren.
Inspiratie heb ik opgedaan door een artikel/workshop in Webdesigner Magazine nr. 88 (juli 2016), pag. 60 en 61. Dit
blad wordt sinds eind november 2017 niet meer gemaakt.
Voor toepassing op deze site heb ik de code vereenvoudigd.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit CSS (in de <head>) en HTML (in de <body>). Er komt geen JavaScript bij kijken.
- De HTML-code bestaat uit een aantal geneste <div>-tags, elk met een eigen class.
- De buitenste div heeft class="wrapper". Deze dient alleen om de zaken bij elkaar te houden en te positioneren in het document.
- Binnen wrapper zijn er twee div's, een met klasse links, de andere met klasse rechts.
- Beide div's zijn binnen de wrapper vastgelegd met behulp van position:absolute;, top:0; en left:0; resp. right:0;.
- De afmetingen van links en rechts zijn gelijk aan de afmetingen van de foto. Hier is dat 250px × 187px.
- Door links en rechts de eigenschap display:inline-block; mee te geven, staan ze altijd netjes naast elkaar.
- Omdat de breedte van wrapper (hier: 520px) iets groter is dan de breedte van de beide foto's samen en door de manier
waarop de foto's binnen de wrapper zijn geplaatst, ontstaat er een mooie tussenruimte.
De wrapper is even hoog als de foto's.
- De linker foto is de achtergrond van de div met klasse links.
- De <div> met klasse rechts heeft een paarse achtergrond: .
De foto is de achtergrond van <div class="effect">, die binnen rechts staat, dezelfde afmetingen heeft, in de linker bovenhoek van rechts staat en er dus bovenop ligt. - De paarse gloed ontstaat met de CSS-code:
.rechts .effect { mix-blend-mode: multiply; } - Op w3schools.com vind je een uitgebreide beschrijving van de mogelijkheden van mix-blend-mode.
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>
.wrapper {
position:relative;
margin:20px auto 20px auto;
padding:0;
width:520px;
height:187px;
}
.links, .rechts {
display:inline-block;
}
.links {
position:absolute; top:0; left:0;
width: 250px; height:187px;
background: url('foto.jpg') no-repeat center center;
}
.rechts {
position:absolute; top:0; right:0;
width: 250px; height:187px;
background-color: #a458ff;
}
.effect {
position:relative; top:0 right:0;
width: 250px; height:187px;
background: url('foto.jpg') no-repeat center center;
}
.rechts .effect {
mix-blend-mode: multiply;
}
</style>
(Zet dit in de <BODY> op de plaats waar de foto's moeten staan).
<div class="wrapper">
<div class="links"></div>
<div class="rechts">
<div class="effect"></div>
</div>
</div>
Downloaden:
Druk op de knop:
File: voorb531.zip, 524 bytes.
