Afbeeldingseffecten toevoegen in CSS met filter

Er bestaan een hoop CSS eigenschappen die je niet elke dag gebruikt. Één van die eigenschappen waar ik heel enthousiast van wordt is ‘filter’. Hiermee kun je afbeeldingen mooie effecten geven die je normaal in Photoshop of een ander dergelijk programma zou toepassen. Deze effecten kunnen veel toevoegen aan het uiterlijk van je webpagina. Ook kun je de effecten makkelijk bewerken zonder dat je nieuwe afbeeldingen hoeft te uploaden. In dit blog laat ik je graag zien wat je allemaal kunt doen met deze eigenschap.

De verschillende eigenschappen

Laten we eerst kijken welke waarden er allemaal beschikbaar zijn voor het eigenschap ‘filter’. In deze lijst heb ik de door mij meest toegepaste genoteerd:

• blur(waarde in pixels) - Vervaagd het element met het aantal pixels. Dit is een blur van het type gaussian.
• brightness(waarde in procenten) - maakt de afbeelding lichter. Hierbij is 0% compleet zwart, 100% de standaard lichtheid en waardes boven 100% maken het element lichter.
• grayscale(waarde in procenten) - Doet wat het zegt - het neemt verzadiging weg van de afbeelding en werkt naar grijswaarden toe.
• saturate(waarde in procenten) - Voegt verzadiging aan een afbeelding toe; de kleuren zullen er meer uitspringen
• sepia(waarde in procenten) - Voegt een sepia effect toe aan de afbeelding. Dit kun je gebruiken om de afbeeldingen een verouderd effect te geven.

Je kunt op W3schools een complete lijst vinden.

Deze waardes pas je dus heel makkelijk zo toe in je CSS:

img {
            filter: blur(5px);
}

Laten we het animeren!

Alle type filters zijn ook te animeren! Dit kun je doen door op hetzelfde element de CSS-eigenschap ‘transition’ te plaatsen. Hieronder zie je een voorbeeld:

img {
            filter: blur(5px);
            transition: filter 1s ease-in-out;
}

Meer mogelijkheden

Deze effecten kun je niet alleen op afbeeldingen toepassen, maar op alle elementen! Dit brengt mooie mogelijkheden met zich mee. Hier zijn enkele ideeën die je kunt uitproberen:

• Transities maken tussen pagina’s door op de body een blur of brightness filter toe te voegen en deze te animeren
• Mouseover-effecten voor tegels
• Kleuren van knoppen er laten uitspringen door deze extra verzadiging te geven
• Een achtergrond maken met een blur effect
• Bekijk een categorie-overzicht 
• Elementen met gradients animeren (normaal kun je gradients niet animeren maar met filter wel)

Limitaties

Let er wel op dat deze effecten enkel voor moderne browsers werken - dat wil zeggen, de nieuwe versies van de verschillende browsers, exclusief Internet Explorer. Wij zien dat het gebruik van Internet Explorer door consumenten afneemt, maar het gebruik door bedrijven minder langzaam afneemt. Let er dus op dat de pagina nog goed werkt als de filters niet werken.

Hopelijk heb je wat inspiratie gekregen om zelf aan de slag te gaan met CSS filters. Ben jij druk bezig met CSS onder de knie te krijgen, of ben jij al een ware CSS-tovenaar? Bezoek dan onze vacatures en vind de werkplek waar jij helemaal thuis voelt!