Tutoriel CSS3 - sommaire

CSS : les filtres graphiques avec CSS3 : propriété filter

Vous voulez insérer, par exemple, dans une page web une photo qui doit apparaître floutée et couleur "sépia".
Plus besoin de passer par un logiciel graphique tel Photoshop ou Gimp pour modifier la photo originale.
Il vous suffit désormais de l'incorporer sans retouche dans la page (avec la balise IMG) et de la styler avec une règle basée sur la nouvelle propriété filter.
La propriété filter peut s'appliquer à n'importe quel élément HTML.

Application d'un filtre à une photo

Les photos originales

Photos respectivement floutée et vieillie avec un effet 'sépia'

Le code correspondant

Pour flouter une image il faut utiliser la commande blur() avec en paramètre une valeur en pixels (px). Plus la valeur est grande et plus l'image sera floue.
Pour vieillir une photo il faut utiliser la commande sepia avec en paramètre une valeur décimale comprise entre 0 et 1.

Toutes les commandes de la propriété filter

Nous allons maintenant passer en revue toutes les commandes possibles de la propriété CSS filter. Et elles sont nombreuses ...

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.
Code correspondant : <img src = "../images/trikini.jpg" style ="filter :grayscale(100%);"/> <img src = "../images/trikini.jpg" style ="filter :grayscale(50%);" /> <img src = "../images/trikini.jpg" style ="filter :grayscale(0%);" />

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%.
Code correspondant : <img src = "../images/trikini.jpg" style ="filter : sepia(100%);" /> <img src = "../images/trikini.jpg" style ="filter : sepia(50%);"/> <img src = "../images/trikini.jpg" style ="filter : sepia(0%);" />

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.
Code correspondant : <img src = "../images/trikini.jpg" style ="filter : saturate(0); " /> <img src = "../images/trikini.jpg" style ="filter : saturate(2);"/> <img src = "../images/trikini.jpg" style ="filter : saturate(6);"/>

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.

Une rotation de 360° équivaut a une rotation de 0°.
Ci-dessus l'argument est successivement 0 deg, 90deg, 180deg et 270deg.
Le code correspondant : <img src = "../images/trikini.jpg" style ="filter :hue-rotate(0deg);" /> <img src = "../images/trikini.jpg" style ="filter :hue-rotate(90deg);" /> <img src = "../images/trikini.jpg" style ="filter :hue-rotate(180deg);" /> <img src = "../images/trikini.jpg" style ="filter :hue-rotate(270deg);" />

Commande blur

Le floutage a déjà été évoquée plus haut.

Le paramètre est exprimé en pixels (px). Si l'argument est 0px alors aucun floutage.
Ci-dessus l'argument vaut successivement 6px, 3px et 0px.
Le code correspondant : <img src = "../images/trikini.jpg" style ="filter : blur(6px);" /> <img src = "../images/trikini.jpg" style ="filter : blur(3px);" /> <img src = "../images/trikini.jpg" style ="filter : blur(0px);" />

Commande invert

Cette commande permet d'obtenir le négatif d'une image.

L'argument ne peut prendre que deux valeurs : 1(négatif) ou 0 (image d'origine).
Le code correspondant : <img src = "../images/trikini.jpg" style ="filter : invert(1);" /> <img src = "../images/trikini.jpg" style ="filter : invert(0);" />

Commande brightness

Elle 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%
Code correspondant : <img src = "../images/trikini.jpg" style ="filter : brightness(200%);" /> <img src = "../images/trikini.jpg" style ="filter : brightness(100%);" /> <img src = "../images/trikini.jpg" style ="filter : brightness(50%);" /> <img src = "../images/trikini.jpg" style ="filter : brightness(25%);" />

Commande contrast

Elle 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 perte de contraste.
Ci-dessus l'argument vaut successivement 200%, 100%, 50% et 0%.

Le code correspondant : <img src = "../images/trikini.jpg" style ="filter : contrast(200%);" /> <img src = "../images/trikini.jpg" style ="filter : contrast(100%);" /> <img src = "../images/trikini.jpg" style ="filter : contrast(50%);" /> <img src = "../images/trikini.jpg" style ="filter : contrast(0%);" />

Ombrage d'une boite ou image

Pour ombrer une boite ou image, on pense à la propriété box-shadow mais sachez qu'il est aussi possible de créer un filtre argumenté avec la fonction drop-shadow().
Dans l'exemple ci-dessous, je vous montre que les deux solutions ne sont pas totalement identiques ...

Le rendu

Quatre logos Facebook
• image au format PNG et ombrage avec box-shadow
• image au format PNG et ombrage avec la propriété filter:drop-shadow()
• image au format JPEG et ombrage avec box-shadow
• image au format JPEG et ombrage avec la propriété filter:drop-shadow()

Pour une image autorisant la transparence et avec la propriété box-shadow c'est la boite contenant l'image qui est ombrée alors qu'avec la fonction drop-shadow de filter, c'est l'image proprement dite (indépendamment du fond transparent) qui est ombrée.

Pour un format d'image n'autorisant pas la transparence, les deux méthodes donnent un rendu identique.

Le code CSS & HTML de la page

Avec des formats d'images autorisant la transparence (GIF & PNG & SVG) la fonction drop-shadow est très intéressante.

Filtre CSS composite appliqué à des photos

Les images ci-dessous sont ombrées, floutées et subissent une rotation dans le cercle chromatique.
Notez que les effets de l'ombrage sont différents selon qu'il s'agit d'une image png ou jpeg.

Le code correspondant

Une classe dans la feuille de style et deux instructions : CSS : .filtre1 {filter : blur(4px) hue-rotate(180deg) drop-shadow(10px 10px 10px gray); } HTML : <h2>Filtre CSS composite appliqué à des photos</h2> <img src ="../images/facebook_logo.png" class ="filtre1"> <img src ="../images/facebook_logo.jpg" class ="filtre1"> ...

On peut donc produire des filtres composites c'est à dire basés sur plusieurs primitives.
Ici le filtre comprend trois primitives.