Découvrez comment appliquer des filtres CSS à vos images pour les rendre plus attrayantes et dynamiques.
blur
La fonction CSS blur() permet d'appliquer un flou gaussien sur l'image d'entrée. Le résultat de cette fonction est une valeur filter-function.
img {
filter: blur(5px);
}Un petit exemple visuel de la fonction blur() :
Originale
2px
5px
brightness
La fonction CSS brightness() applique un multiplicateur linéaire sur une image afin de la rendre plus claire ou plus sombre. Le résultat obtenu est une valeur de type filter-function.
img {
filter: brightness(50%);
}Un petit exemple visuel de la fonction brightness() :
Originale
50%
150%
contrast
La fonction CSS contrast() permet d'ajuster le contraste d'une image. Le résultat de cette fonction est une valeur de type filter-function.
img {
filter: contrast(25%);
}Un petit exemple visuel de la fonction contrast() :
Originale
25%
150%
drop-shadow
La fonction CSS drop-shadow() permet d'appliquer une ombre portée sur une image. Le résultat obtenu par cette fonction est une valeur filter-function.
img {
filter: drop-shadow(4px 4px 8px #999999);
}Un petit exemple visuel de la fonction drop-shadow() :
Originale
4px/8px
8px/16px
grayscale
La fonction CSS grayscale() convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur filter-function.
img {
filter: grayscale(50%);
}Un petit exemple visuel de la fonction grayscale() :
Originale
50%
100%
hue-rotate
La fonction CSS hue-rotate() permet d'appliquer une rotation de teinte sur une image. Le résultat de cette fonction est une valeur filter-function.
img {
filter: hue-rotate(120deg);
}Un petit exemple visuel de la fonction hue-rotate() :
Originale
120deg
240deg
saturate
La fonction CSS saturate() permet d'accentuer ou de réduire la saturation d'une image. La valeur obtenue par cette fonction est une valeur de type filter-function.
img {
filter: saturate(50%);
}Un petit exemple visuel de la fonction saturate() :
Originale
50%
150%
invert
La fonction CSS invert() permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type filter-function.
img {
filter: invert(100%);
}Un petit exemple visuel de la fonction invert() :
Originale
25%
100%
opacity
La fonction CSS opacity() permet de modifier la transparence de l'image. Le résultat obtenu par cette fonction est une valeur filter-function.
img {
filter: opacity(75%);
}Un petit exemple visuel de la fonction opacity() :
Originale
25%
75%
sepia
La fonction CSS sepia() convertit une image en sépia, lui donnant un aspect plus jaune/marron, voire vieilli. Le résultat obtenu est une valeur de type filter-function.
img {
filter: sepia(50%);
}Un petit exemple visuel de la fonction sepia() :
Originale
50%
100%
Conclusion
Nous avons vu comment appliquer des filtres CSS à vos images pour les rendre plus attrayantes et dynamiques. Les filtres CSS sont un excellent moyen d'ajouter des effets visuels à vos images sans avoir à utiliser des logiciels de retouche d'image.