Over de CSS-eigenschap filter
Voor sommige toepassingen op je website zou het handig zijn als je wat gereedschap had waarmee je eenvoudige foto-bewerkingen
zou kunnen doen. Met de CSS-eigenschap filter, in combinatie met een moderne browser, kan dat.
Op deze bladzijde wordt beschreven hoe je dat doet.
Voor sommige (heel oude) browsers is de vendor-prefix -webkit- nodig.
Bij filter noem je één of meerdere filter-functions, die het werk doen. Om de naam en de werking van
zo'n filter te begrijpen moet je iets weten van foto-bewerking.
De CSS-code ziet er in principe als volgt uit:
img {
filter: function_1() function_2();
}
De parameter(s) die je moet meegeven worden genoemd in het overzicht hieronder.
| filter function | Parameter | Doel | ||
| none | - geen - | Default-instelling. Normaal wordt er niet gefilterd. Dit heb je nodig als je een filter wilt in- of uitschakelen met JavaScript. filter: none |
||
| blur() | pixels | Vervagen van de foto. De parameter definieert de blur-radius. Default is 0 (geen blur-effect). Voor sommige android-versies mag dit niet meer zijn dan 25px. filter: blur(15px) |
||
| brightness() | percentage | Helderheid van de foto aanpassen. 0% maakt de foto helemaal zwart. 100% (of 1) is default en geeft de oorspronkelijke foto. Waarden boven 100% maken de foto lichter. De foto helemaal wit maken gaat echter niet, zelfs niet bij heel hoge waarden (≥ 50000%). filter: brightness(115%) |
||
| contrast() | percentage | Contrast van de foto instellen. 0% wil zeggen: geen contrast; de hele foto wordt grijs. 100% (of 1) is default en geeft de oorspronkelijke foto. Waarden boven 100% geven de foto meer contrast. filter: contrast(125%) |
||
| drop-shadow() | percentage (3× of 4×), kleurnaam of -code | Maak een schaduw bij de foto. Dit is gelijk aan de CSS-eigenschap box-shadow. Zie het item "Lichtgevende" schaduwen met CSS. Achtereenvolgens geef je op: Grootte van de schaduw in horizontale resp. verticale richting (h-dist en v-dist), breedte van het verloop naar de achtergrond (blur), schaling van de schaduw (spread) en de kleur. Alleen h-dist en v-dist zijn verplicht. 
 filter: drop-shadow(10px 10px 5px blue) |
||
| grayscale() | percentage | Zet de foto om in grijswaarden (zwart-wit foto). 0% geeft de oorspronkelijke foto, met 100% wordt de foto helemaal zwart-wit. De parameter mag niet negatief zijn. Zie het item Hover-effect met zwart-wit foto's om het effect te zien werken. filter: grayscale(100%) |
||
| hue-rotate() | graden of radialen | Verander de kleuren van een foto door de hoek van de HSL-cirkel te verdraaien. De parameter is de hoek, di mag je opgeven in graden (deg) of in radialen (rad). Rotatie over 180deg is dus hetzelfde als rotatie over 1.57rad. Informatie over het HLS-systeem vind je in het item Kleurcodes voor tekst, links en achtergrond. filter: hue-rotate(135deg) |
||
| invert() | percentage | Maak het beeld foto-negatief. De parameter bepaalt de mate van omkering. 0% is het gewone plaatje. Bij 50% is het plaatje egaal grijs. Bij 100% is het plaatje helemaal foto-negatief. De parameter mag niet negatief zijn. Voor de scherpslijpers onder ons: Het rode masker dat je bij 'echte' foto-negatieven hebt, ontbreekt natuurlijk... filter: invert(75%) |
||
| opacity() | percentage | Maak de foto doorzichtig. Dit is gelijk aan de CSS-eigenschap opacity. Zie het item Figuren transparant maken met CSS. Bij 0% is de foto helemaal doorzichtig, bij 100% is de foto helemaal ondoorzichtig. De parameter mag niet negatief zijn. filter: opacity(20%) |
||
| saturate() | Verandert de kleurverzadiging van de foto. Bij 0% verdwijnt alle kleur en wordt de foto zwart-wit. Bij 100% krijg je de originele foto. Bij hogere waarden worden de kleuren oververzadigd. De parameter mag niet negatief zijn. filter: saturate(200%) |
|||
| sepia() | percentage | Verandert de kleuren van een foto in sepia. Behalve de kleuren is dit identiek aan grayscale(). filter: sepia(100%) |
||
| url() | url | De url() function verwijst naar een XML-bestand dat een SVG-filter bevat en mag verwijzen naar
een specifiek filter in dat bestand. filter: url(bestand-met-svg-xml#dit-filter)
|
Als je een waarde in px moet opgeven, heeft dat de voorkeur. Daar mag je ook em, ex, enz. gebruiken.
Filters werken alleen op zichtbare elementen die niet worden bedekt door andere elementen. Filters toepassen op elementen die onder het doelelement liggen, wordt nog nauwelijks ondersteund.
Sommige van deze filters zijn heel geschikt om te gebruiken in combinatie met een hover-effect. Als je dat laat werken met een transition, kun je mooie effecten bereiken. Zie bijvoorbeeld het item Hover-effect met zwart-wit fotos.
