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 styliser avec une règle basée sur la propriété filter.
Dans ce chapitre je vous montre aussi qu'un filtrage CSS peut s'appliquer non seulement à des éléments HTML mais aussi à des objets SVG.

Application d'un filtre à une photo

Les photos originales

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

Le code correspondant

À chaque fois on paramètre la propriété CSS filter avec une fonction.

Toutes les fonctions 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 ...

Fonction 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%);" />

Fonction 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%);" />

Fonction 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);"/>

Fonction 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);" />

Fonction 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);" />

Fonction 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);" />

Fonction 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%);" />

Fonction 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 d'appliquer la fonction drop-shadow() à la propriété filter.
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 la propriété box-shadow
• image au format PNG et ombrage avec filter:drop-shadow()
• image au format JPEG et ombrage avec la propriété box-shadow
• image au format JPEG et ombrage avec filter:drop-shadow()

Pour une image autorisant la transparence et avec la fonction box-shadow c'est la boite contenant l'image qui est ombrée alors qu'avec filter : drop-shadow c'est l'image proprement dite 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

Filtre CSS composite appliqué à des images

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 avec un fond transparent et un image avec un fond blanc opaque.

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 images</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.

Appliquer des filtres CSS à des éléments SVG

Les filtres définis dans une feuille de style peuvent s'appliquer non seulement à des éléments HTML mais aussi à des objets SVG. Ce qui est très intéressant car la définition des filtres selon la syntaxe CSS est plus concise que selon la syntaxe SVG.

Exemple

Dans l'exemple ci-dessous j'applique des filtres définis selon la syntaxe CSS non seulement à des éléments HTML mais aussi à des objets SVG.

Les éléments HTML : trois balises IMG

Les objets SVG : trois balises RECT à l'intérieur du conteneur SVG

La première image et le premier rectangle sont floutés.
La deuxième image et le deuxième rectangle sont ombrés.
La troisième image et le troisième rectangle sont floutés et ombrés.

Le code correspondant

La feuille de style de notre page web

.flou1 {filter : blur(6px);}
.ombrage1{filter : drop-shadow(10px 10px 10px gray) }
.composite1 {filter : blur(4px) drop-shadow(10px 10px 10px gray); }

Les classes correspondent à des filtres.
Le troisième filtre est composite : flou et ombrage.

Le code HTML & SVG

Les objets SVG doivent être dessinés à l'intérieur du conteneur SVG.

On applique des filtres définis selon la syntaxe CSS à des éléments HTML puis à des éléments SVG via les mêmes classes CSS.
Filtrer les éléments SVG