Les filtres CSS3

Appliqués sur des images

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

10 commentaires Donner une note à l'article (5)

Article lu   fois.

Les deux auteur et traducteur

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

 
Sélectionnez
img
{
     filter: type(value);
}

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

 
Sélectionnez
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.

CSS Grayscale

Voici le code HTML que nous allons utiliser.

 
Sélectionnez
<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.

 
Sélectionnez
.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.

CSS Blur

 
Sélectionnez
<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.

 
Sélectionnez
.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%.

CSS Saturate

 
Sélectionnez
<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.

 
Sélectionnez
.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.

CSS Sepia

 
Sélectionnez
<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.

 
Sélectionnez
.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.

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.

 
Sélectionnez
.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).

CSS Invert

 
Sélectionnez
<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.

 
Sélectionnez
.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.

CSS Brightness

 
Sélectionnez
<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.

 
Sélectionnez
.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.

CSS Contrast

 
Sélectionnez
<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.

 
Sélectionnez
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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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.