Date de publication de l'article

Les filtres CSS pour les images

4 minutes de lecture

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() :

Un chat tout mignon

Originale

Un chat tout mignon

2px

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

50%

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

25%

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

4px/8px

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

50%

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

120deg

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

50%

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

25%

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

25%

Un chat tout mignon

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() :

Un chat tout mignon

Originale

Un chat tout mignon

50%

Un chat tout mignon

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.