CSS filters zijn een krachtig gereedschap dat auteurs kunnen gebruiken om verschillende visuele effecten te bereiken (een beetje zoals Photoshop filters voor de browser). De CSS filter eigenschap biedt toegang tot effecten zoals vervagen of kleur verschuiven op de rendering van een element voordat het element wordt weergegeven. Filters worden vaak gebruikt om de rendering van een afbeelding, een achtergrond, of een rand aan te passen.
.filter-voorbeeld {
filter: blur(3px);
filter: grayscale(1);
filter: saturate(2.2);
filter: none; /* remove existing filter */
}
Er zijn een aantal functies te gebruiken voor de waarde:
blur()
helderheid()
contrast()
slagschaduw()
grijstinten()
tint-rotatie()
inverteren()
opaciteit()
verzadigen()
sepia()
url() – voor het toepassen van SVG filters
custom() – “komt binnenkort”
Meerdere functies met filters in CSS
Meerdere functies kunnen worden gebruikt, door spaties gescheiden.Meerdere functies kunnen worden gebruikt, door spaties gescheiden.
.meer dingen {
filter: blur(20px) grayscale(20%);
}