CSS-filter is een gemakkelijke manier om visuele effecten toe te passen aan afbeeldingen, achtergronden en randen. Sommige van deze effecten omvatten vervaging, wijzigen van verzadiging, contrast, helderheid, draaiing en vele andere.
De algemene syntaxis voor een CSS-filter is:
```
element {
filter: functienaam(waarde);
}
```
Bijvoorbeeld, om een vervagingseffect toe te voegen aan een afbeelding, kunt u de blur-functie gebruiken:
```
img {
filter: blur(5px);
}
```
In dit geval zal “5px” de vervaging van de afbeelding verhogen. Als u “0px” gebruikt, wordt er geen vervaging toegepast.
Een van de geweldige dingen aan CSS-filters is dat u meerdere filters tegelijk op een enkel element kunt toepassen door ze te scheiden met een spatie.
```
img {
filter: grayscale(100%) blur(5px);
}
```
In dit voorbeeld wordt de afbeelding eerst omgezet naar grijswaarden, daarna wordt de blur toegepast.
Er zijn verschillende functies die u kunt gebruiken:
- `blur()` – Hiermee kunt u een afbeelding vervagen.
- `brightness()` – Hiermee kunt u de helderheid van een afbeelding wijzigen.
- `contrast()` – Hiermee kunt u het contrast van een afbeelding wijzigen.
- `grayscale()` – Hiermee kunt u een afbeelding omzetten in grijswaarden.
- `hue-rotate()` – Hiermee kunt u de tint van een afbeelding draaien.
- `invert()` – Hiermee kunt u de kleuren van een afbeelding omkeren.
- `opacity()` – Hiermee kunt u de ondoorzichtigheid van een afbeelding wijzigen.
- `saturate()` – Hiermee kunt u de verzadiging van een afbeelding verhogen.
- `sepia()` – Hiermee kunt u een afbeelding omzetten naar sepiakleuren.
- `drop-shadow()` – Hiermee kunt u een schaduweffect toevoegen aan een afbeelding.
Het toepassen van CSS-filters kan webpagina’s aantrekkelijker maken en gebruikers een betere ervaring bieden.
