Afbeeldingseffecten toevoegen in CSS met filter header image

Afbeeldingseffecten toevoegen in CSS met filter

woensdag 30 september 2020 ·Leestijd: 2 minuten
contacteer auteur:

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!


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º