Tous mes articles de blog

Découvrez comment appliquer des filtres CSS à vos images pour les rendre plus attrayantes et dynamiques.

1. La fonction 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.

css
Copier
img {
    filter: blur(5px);
}

Un petit exemple visuel de la fonction blur() :

Originale

2px

5px

2. La fonction 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.

css
Copier
img {
    filter: brightness(50%);
}

Un petit exemple visuel de la fonction brightness() :

Originale

50%

150%

3. La fonction 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.

css
Copier
img {
    filter: contrast(25%);
}

Un petit exemple visuel de la fonction contrast() :

Originale

25%

150%

4. La fonction 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.

css
Copier
img {
    filter: drop-shadow(4px 4px 8px #999999);
}

Un petit exemple visuel de la fonction drop-shadow() :

Originale

4px/8px

8px/16px

5. La fonction grayscale

La fonction CSS grayscale() convertit une image en niveaux de gris. Le résultat de cette fonction est une valeur filter-function.

css
Copier
img {
    filter: grayscale(50%);
}

Un petit exemple visuel de la fonction grayscale() :

Originale

50%

100%

6. La fonction 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.

css
Copier
img {
    filter: hue-rotate(120deg);
}

Un petit exemple visuel de la fonction hue-rotate() :

Originale

120deg

240deg

7. La fonction 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.

css
Copier
img {
    filter: saturate(50%);
}

Un petit exemple visuel de la fonction saturate() :

Originale

50%

150%

8. La fonction invert

La fonction CSS invert() permet d'inverser les couleurs de l'image. La valeur obtenue par cette fonction est de type filter-function.

css
Copier
img {
    filter: invert(100%);
}

Un petit exemple visuel de la fonction invert() :

Originale

25%

100%

9. La fonction 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.

css
Copier
img {
    filter: opacity(75%);
}

Un petit exemple visuel de la fonction opacity() :

Originale

25%

75%

10. La fonction 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.

css
Copier
img {
    filter: sepia(50%);
}

Un petit exemple visuel de la fonction sepia() :

Originale

50%

100%

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.