Filtre
La propriété filter permet de réaliser des effets de filtre.
1
img {2
filter: blur(5px) brightness(0.5);
3
}
Ajoute du flou et baisse la luminosité.
Définition : blur()
Ajoute du flou
Définition : brightness()
Modifie la luminosité (0 noir, 1 original)
Définition : contrast()
Modifie le contraste (0 gris, 1 original)
Définition : drop-shadow()
Ajoute une ombre : drop-shadow(decalageX decalageY flou couleur)
1
filter: drop-shadow(16px 16px 10px black);
Définition : grayscale()
Niveau de gris (0 original, 1 total)
1
filter: grayscale(1);
Définition : hue-rotate()
Rotation sur le cercle des couleurs (valeur h du modèle hsl)
1
filter: hue-rotate(50deg);
Définition : invert()
Inverse les couleurs (0 original, 1 négatif)
1
filter: invert(1);
Définition : opacity()
Règle l'opacité (0 transparente, 1 original)
1
filter: opacity(0.5);
Définition : saturate()
Sature
1
filter: saturate(0.5);
Définition : sepia()
Conversion en sépia (0 original, 1 complet)
1
filter: sepia(1);
Complément : Combinaisons
On peut combiner les filtres
1
filter: contrast(0.5) brightness(0.5)