Les filtres CSS3

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, CSS3 Image Filters.

Dans cet article, nous allons nous intéresser à une excellente nouvelle fonctionnalité de CSS3 : les filtres. C'est une fonctionnalité qui peut être utilisée à la fois sur des éléments HTML et des images, mais qui a plus d'intérêt à être utilisée sur des images comme pour la création d'une galerie par exemple.

En utilisant uniquement le CSS vous allez être capable de créer tous les effets suivants :

• greyscale ;
• blur ;
• saturate ;
• sepia ;
• hue rotate ;
• invert ;
• brightness ;
• contrast ;
• opacity.

Pour utiliser un filtre c'est aussi simple que d'utiliser n'importe quelle autre propriété CSS.

img
{
     filter: type(value);
}

Comme la plupart des nouvelles fonctionnalités CSS3 vous avez besoin de préfixer la propriété.

img
{
     filter: type(value);
     -webkit-filter: type(value);
     -moz-filter: type(value);
     -ms-filter: type(value);
     -o-filter: type(value);
}

Actuellement les seuls navigateurs supportant cette fonctionnalité sont les navigateurs webkit à savoir Chrome et Safari.
Les filtres CSS sont donc supportés depuis Chrome 21 et Safari 6.

On ne sait pas encore si Internet Explorer 10 a prévu de supporter les filtres ; Firefox 17 ne les supporte pas.

Cette propriété va convertir votre image en nuances de gris (noir et blanc).

La valeur du filtre peut-être soit un pourcentage soit un nombre décimal. La valeur 1 ou 100% transformera l'image en noir et blanc total et 0 n'aura aucun effet.

CSS Grayscale

Voici le code HTML que nous allons utiliser.

<section class="grayscale">
<h2>CSS Greyscale</h2>
        <img height="200" src="images/water.jpg" />
</section>

Pour le code CSS, nous attachons les propriétés aux images à l'intérieur de la section. Tout d'abord, nous allons définir une valeur pour un effet noir et blanc total puis au survol de l'image par la souris nous allons retirer l'effet.

.grayscale img
{
        filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
}
.grayscale img:hover
{
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
}

Cet effet va prendre votre image et y appliquer un flou qui sera plus ou moins important en fonction de la valeur de la propriété.
Le flou sera mesuré en pixels ; plus la valeur sera grande et plus l'image sera floutée.

CSS Blur

<section class="blur">
<h2>CSS Blur</h2>
        <img height="200" src="images/water.jpg" />
</section>

Le code CSS est une fois de plus attaché aux images. Nous définissons en premier lieu un flou de cinq pixels, puis au survol de l'image on annulera ce flou.

.blur img
{
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
}
.blur img:hover
{
        filter: blur(0);
        -webkit-filter: blur(0);
        -moz-filter: blur(0);
        -o-filter: blur(0);
        -ms-filter: blur(0);
}

Cet effet ajoute de la saturation sur les couleurs de votre image.

La valeur de la propriété peut être un nombre décimal ou un pourcentage, sachant que la saturation par défaut est de 100%. Pour ajouter de la saturation il faut donc renseigner une valeur supérieure à 100%.

CSS Saturate

<section class="saturate">
<h2>CSS Saturate</h2>
        <img height="200" src="images/water.jpg" />
</section>

Le code CSS suivant applique une saturation de 500% puis permet d'annuler cette saturation et de revenir à l'image originale au survol de cette dernière.

.saturate img
{
        filter: saturate(500%);
        -webkit-filter: saturate(500%);
        -moz-filter: saturate(500%);
        -o-filter: saturate(500%);
        -ms-filter: saturate(500%);
}
.saturate img:hover
{
        filter: saturate(100%);
        -webkit-filter: saturate(100%);
        -moz-filter: saturate(100%);
        -o-filter: saturate(100%);
        -ms-filter: saturate(100%);
}

Cet effet va ajouter une teinte sepia à votre image ce qui donne l'impression que c'est une vieille photographie.

CSS Sepia

<section class="sepia">
<h2>CSS Sepia</h2>
        <img height="200" src="images/water.jpg" />
</section>

La valeur de la propriété sepia peut être soit un pourcentage, soit un nombre décimal. 100% ou 1 correspond à du sepia total tandis que 0 correspond à l'image originale.

.sepia img
{
        filter: sepia(1);
        -webkit-filter: sepia(1);
        -moz-filter: sepia(1);
        -o-filter: sepia(1);
        -ms-filter: sepia(1);
}
.sepia img:hover
{
        filter: sepia(0);
        -webkit-filter: sepia(0);
        -moz-filter: sepia(0);
        -o-filter: sepia(0);
        -ms-filter: sepia(0);
}

Cet effet va changer la couleur de l'image qui sera complètement différente en fonction du degré que vous affecterez en CSS.

La meilleure représentation de cet effet est de penser à une roue de spectres de couleur. La couleur de départ sera modifiée pour une nouvelle couleur qui correspondra à la valeur attribuée à la propriété hue-rotate.

CSS Hue Rotate

La valeur de la propriété doit être en degré, la valeur normale étant 0. Si vous mettez comme valeur 360 degrés, l'image reviendra à son état initial, correspondant à la valeur 0.

.hue-rotate img
{
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
        -moz-filter: hue-rotate(180deg);
        -o-filter: hue-rotate(180deg);
        -ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover
{
        filter: hue-rotate(0);
        -webkit-filter: hue-rotate(0);
        -moz-filter: hue-rotate(0);
        -o-filter: hue-rotate(0);
        -ms-filter: hue-rotate(0);
}

Cet effet va changer l'apparence de l'image qui ressemblera à un négatif (dans le temps où l'on développait encore nos photos).

CSS Invert

<section class="invert">
<h2>CSS Invert</h2>
        <img height="200" src="images/water.jpg" />
</section>

La valeur de la propriété peut être soit un pourcentage soit un nombre décimal. 100% ou 1 correspond à une inversion totale.

.invert img
{
        filter: invert(1);
        -webkit-filter: invert(1);
        -moz-filter: invert(1);
        -o-filter: invert(1);
        -ms-filter: invert(1);
}
.invert img:hover
{
        filter: invert(0);
        -webkit-filter: invert(0);
        -moz-filter: invert(0);
        -o-filter: invert(0);
        -ms-filter: invert(0);
}

Cet effet permet de modifier la luminosité de l'image.

CSS Brightness

<section class="brightness">
<h2>CSS Brightness</h2>
        <img height="200" src="images/water.jpg" />
</section>

La valeur de la propriété peut être soit un pourcentage, soit un nombre décimal. 100% ou 1 correspond à une clarté maximum et 0 à l'image originale.

.brightness img
{
        filter: brightness(50%);
        -webkit-filter: brightness(50%);
        -moz-filter: brightness(50%);
        -o-filter: brightness(50%);
        -ms-filter: brightness(50%);
}
.brightness img:hover
{
        filter: brightness(100%);
        -webkit-filter: brightness(100%);
        -moz-filter: brightness(100%);
        -o-filter: brightness(100%);
        -ms-filter: brightness(100%);
}

Cet effet va modifier le contraste de l'image, c'est-à-dire la différence entre les zones sombres et les zones claires.

CSS Contrast

<section class="contrast">
<h2>CSS Contrast</h2>
        <img height="200" src="images/water.jpg" />
</section>

La valeur de la propriété peut être soit un pourcentage, soit un nombre décimal. Le contraste par défaut est 1, pour l'assombrir vous devez diminuer la valeur de la propriété et pour l'éclaircir l'augmenter.

Dans nos exemples, nous modifions les effets appliqués aux images au survol de celles-ci (avec la souris), donc il peut être intéressant d'ajouter une petite animation à ce survol. Pour cela nous allons utiliser la propriété CSS transition.

Sur l'événement hover de chaque image nous allons faire en sorte que l'image grossisse pour donner un effet de pop out.

img{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
img:hover{
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
}

Nous avons vu dans ce tutoriel les différents effets applicables aux images grâce à la propriété filter de CSS3.

Vous pouvez vous amuser en appliquant ces filtres sur d'autres éléments par exemple !

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.