Gedeeltelijk kleurenfilter

In de traditionele fotografie werden filters gebruikt om de helderheid en/of de kleuren te beïnvloeden. Met de opkomst van de digitale fotografie (en daarmee van de software voor fotobewerking) kunnen dergelijke effecten ook met een computer worden gemaakt. Met HTML en CSS zijn er ook mogelijkheden die vergelijkbare effecten opleveren.

Nodig voor deze techniek is dat de horizon de foto horizontaal in tweeën deelt. Verder moeten er niet te veel beeldelementen prominent boven de horizon uitsteken.

We beginnen met een voorbeeld. Hieronder zie je vier variaties van dezelfde foto die met een fotobewerkingsprogramma zijn gemaakt: een strand met een blauwe lucht met stapelwolken. De foto linksboven is het origineel.
•   Rechtsboven is een oranje filter gelegd over de bovenste helft van de foto, waardoor het lijkt op een zonsondergang. De kleur van de blauwe lucht klopt niet meer…
•   Linksonder is hetzelfde filter gebruikt, maar dan zwart. De wolken zijn dreigend, maar de lucht is wel erg donker.
•   Het filter in de foto rechtsonder laat de lucht en de wolken ongemoeid, maar kleurt het strand groen. Daardoor lijkt het op een grasveld.
•   Het gekleurde deel van elk filter is gedeeltelijk transparant.
 

Op deze pagina wordt een betrekkelijk eenvoudige aanpak besproken om de kleur van de lucht of de voorgrond van een (landschaps-)foto te veranderen. De code staat onderaan de pagina. Je kunt hem ook downloaden, maar zonder de foto's.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door een wandkalender, waar dit effect is toegepast op een paar van de foto's.
• De code bestaat uit HTML en CSS. JavaScript wordt niet gebruikt.
• De werking van het script
• Bovenop de originele foto wordt een tweede, even grote, afbeelding gelegd. De kleur verloopt van gedeeltelijk transparant naar volledig transparant.
• In het voorbeeld zijn alleen lineaire kleurovergangen gebruikt, maar radiale kleurovergangen zijn ook mogelijk.
   
• HTML
• De HTML van het bestaat uit twee geneste <div>-tags. De achtergrond van de buitenste is de originele foto, de binnenste is het filter dat bovenop de originele foto wordt geplaatst.
• Beide <div>-tags hebben een klasse. Dat is nodig voor de positionering en voor de opmaak.
   
• CSS
• De klasse foto definieert de afmetingen van de foto en zet de originele foto op de achtergrond met background-image:url().
  Om de twee foto's naast elkaar te krijgen is display:inline-block; toegevoegd. Dat is alleen nodig als je een paar foto's naast elkaar hebt, zoals op deze pagina.
   
• De klasse filterO is het oranje filter waarmee de 'zonsondergang' wordt gemaakt. De grootte wordt ingesteld op de afmetingen van de foto.
• Het kleurverloop van oranje naar transparant wordt ingesteld met background-image:linear-gradient(). Als parameters worden meegegeven:
  •   to bottom Het kleurverloop is van boven naar beneden.
  •   #ffb425 48% De eerste 48% van het verloop is oranje.
  •   transparent 50% Daarna verloopt de kleur naar transparant tot 50% van het verloop.
  •   transparent De rest van het verloop is transparant.
   
• De klasse filterG is het groene filter waarmee het 'grasveld' wordt gemaakt. De grootte wordt ingesteld op de afmetingen van de foto.
• Het kleurverloop van groen naar transparant wordt ingesteld met background-image:linear-gradient(). Als parameters worden meegegeven:
  •   to top Het kleurverloop is van beneden naar boven.
  •   #009000 46% De eerste 46% van het verloop is groen.
  •   transparent 48% Daarna verloopt de kleur naar transparant tot480% van het verloop.
  •   transparent De rest van het verloop is transparant.
   
• De filters zijn doorschijnend gemaakt om te zorgen dat de originele foto zichtbaar blijft. Dat is gedaan met opacity. De mate waarin dat nodig is hangt af van de foto, de kleur van het filter en de gewenste sterkte van het effect.
   
• Hieronder zie je toepassingen van deze techniek: De 'zonsondergang' en het 'grasveld'. Het lijkt aardig op de effecten die met de fotobewerkingssoftware zijn gehaald. Het is in principe mogelijk om het helemaal gelijk te krijgen. Dat vraagt fine-tunen van de parameters van linear-gradient(); dat is lastig.

• Toepassen in je eigen site
• Regel een of meerdere foto's om het effect op toe te passen.
• Download de .zip-file en pak hem uit. Bouw de code op zoals hierboven is aangegeven.
• Voeg foto's toe of verwijder foto's uit de voorbeeld code. Pas de afmetingen van de klasse foto aan en positioneer die in het document.
• Pas de kleur en de doorzichtigheid van het filter aan om het gewenste effect te bereiken.
• De instelling van de scheiding tussen kleur en transparantie vraagt een beetje spelen en proberen.
   
• Tenslotte...
• Het voorbeeld gebruikt linear-gradient() met een verticaal kleurverloop. Natuurlijk kun je ook een horizontaal of gedraaid verloop inzetten. Met radial-gradient() kun je op deze manier ook een een traditioneel spot-filter maken.

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>
.foto {
  width:250px; height:188px;
  background-image:url('foto.jpg');
  display:inline-block;
}
.filterO {
  width:100%; height:100%;
  opacity:.65;
  background-image:linear-gradient(to bottom, #ffb425 48%, transparent 50%, transparent);
}
.filterG {
  width:100%; height:100%;
  opacity:.50;
  background-image:linear-gradient(to top, #009000 46%, transparent 48%, transparent);
}
</style>

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

<div align="center">
  <div class="foto"><div class="filterO"></div></div>
  <div class="foto"><div class="filterG"></div></div>
</div>

Downloaden:
 
Druk op de knop:  File: voorb786.zip, 473 bytes.