CSS : la propriété filter - approfondissements

Attention cette page ne s'affiche correctement qu'avec les navigateures Firefox, Safari et Chrome.

Toutes les commandes de la propriété filter

Dans cette page nous allons passer en revue toutes les commandes possibles de la propriété CSS filter.

Commande grayscale

Grayscale : nuance de gris.
Si le paramètre est 1 (ou 100%) alors image en noir et blanc ; si paramètre vaut 0 alors aucun effet.
Ci-dessus l'argument est successivement 1, 0.5 et 0.
Extrait du code (celui correspondant à la première des trois images) :

<img src = "../images/jolie_fille.jpg" style ="filter :grayscale(100%);"/>

Commande sepia

Sepia : effet de jaunissement de l'image.
Si paramètre vaut 1 (ou 100%) alors sepia total ; si paramètre vaut 0 alors l'image filtrée correspond à celle d'origine.
Ci-dessus l'argument est successivement 100%, 50% et 0%.
Extrait du code (celui correspondant à la première des trois images) :

<img src = "../images/jolie_fille.jpg" style ="filter : sepia(100%);" />

Commande saturate

Saturate : ajoute de la saturation aux couleurs.
Si le paramètre vaut 1 (ou 100%) alors image filtrée correspond à celle d'origine.
Si le paramètre vaut 0 alors image en nuances de gris. Si l'argument est supérieur à 1 alors l'image est saturée.
Ci-dessus l'argument est successivement 0, 2 et 6.
Extrait du code (celui correspondant à la première des trois images) :

<img src = "../images/jolie_fille.jpg" style ="filter : saturate(0); " />

Commande hue-rotate

Il s’agit d’une rotation sur le cercle chromatique.
Le paramètre est une valeur comprise entre 0 degré et 360 degrés.

Attention une rotation de 360° équivaut a une rotation de 0°.

Ci-dessus l'argument est successivement 0 deg, 90deg, 180deg et 270deg.
Extrait du code (celui correspondant aux deux premières images sur les quatre) :

<img src = "../images/jolie_fille.jpg" style ="filter :hue-rotate(0deg);" /> <img src = "../images/jolie_fille.jpg" style ="filter :hue-rotate(90deg);" />

Commande blur

Floute l'image.
Le paramètre est exprimé en pixels (px). Si l'argument est 0px aucun floutage.
Ci-dessus l'argument vaut successivement 6px, 3px et 0px.
Extrait du code (celui correspondant à la première des trois images) :

<img src = "../images/jolie_fille.jpg" style ="filter : blur(6px);" />

Commande invert

Attention l'argument ne peut prendre que deux valeurs : 1(négatif) ou 0 (image d'origine).
Le code HTML :

<img src = "../images/jolie_fille.jpg" style ="filter : invert(1);" /> <img src = "../images/jolie_fille.jpg" style ="filter : invert(0);" />

Commande brightness

Permet de modifier la luminosité de l'image.
La valeur de référence est 1 (ou 100%) ; si argument supérieur à 1 alors image éclaircie ; si argument est inférieur à 1 alors image assombrie.
Ci-dessus l'argument vaut successivement 200%, 100%, 50% et 25%
Extrait du code (celui correspondant à la première des quatre images) :

<img src = "../images/jolie_fille.jpg" style ="filter : brightness(200%);" />

Commande contrast

Permet de modifier le contraste de l'image.
La valeur de référence est 1 (ou 100%) ; si argument supérieur à 1 alors image plus contrastée ; si argument est égal à 0 alors affichage d'une zone grisée. Si le paramètre compris entre 1 et 0 alors perdu du contraste.
Ci-dessus l'argument vaut successivement 200%, 100%, 50% et 0%.
Extrait du code (celui correspondant à la première des quatre images) :

<img src = "../images/jolie_fille.jpg" style ="filter : contrast(200%);" />

Filtre CSS composite appliqué à des photos

Les photos ci-dessus sont floutées mais aussi sont verdies.

Le code CSS

.filtre1 {filter : blur(4px) hue-rotate(90deg); }

On peut donc produire des filtres composites c'est à dire basés sur plusieurs primitives.
Ici filtre défini par la classe filtre est basé sur deux primitives : blur et hue-rotate.

Le code HTML

<img src = "../images/jolie_fille.jpg" class ="filtre1" /> <img src ="../images/cheval.jpg" class ="filtre1" />
Retour menu