Les filtres CSS3

Appliqués sur des images

Paul Underwood

Traducteur

Sébastien Germez

Dans ce tutoriel, nous allons voir comment utiliser les filtres CSS3 sur des images pour obtenir de magnifiques effets.

Commentez

- Titre : Les filtres CSS3

- Auteur : Paul Underwood

- Traducteur : Sébastien Germez

- Parution : 18 décembre 2012

- Public visé :

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2012 Paul Underwood. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Traduction

- II. Introduction

- III. Comment utiliser un filtre ?

- IV. Support des navigateurs

- V. L'effet greyscale

- VI. L'effet blur

- VII. L'effet saturate

- VIII. L'effet sepia

- IX. L'effet hue rotate

- X. L'effet invert

- XI. L'effet brightness

- XII. L'effet contrast

- XIII. Ajouter une animation au survol des images

- XIV. Conclusion

- XV. Remerciements

I - Traduction

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

II - Introduction

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.

III - Comment utiliser un filtre ?

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);
}

IV - Support des navigateurs

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.

V - L'effet greyscale

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.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

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);
}

VI - L'effet blur

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.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<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);
}

VII - L'effet saturate

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%.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<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%);
}

VIII - L'effet sepia

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

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<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);
}

IX - L'effet hue rotate

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.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

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);
}

X - L'effet invert

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).

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<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);
}

XI - L'effet brightness

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

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

<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%);
}

XII - L'effet contrast

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

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

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

XIII - Ajouter une animation au survol des images

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);
}

XIV - Conclusion

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 !

XV - Remerciements

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