Utilisez les filtres CSS3 pour modifier vos images

Publié le Rédigé par
Catégories : FiltresCSS 3Développement Web

Avez vous déjà souhaité appliquer des filtres sur vos images en utilisant uniquement du CSS ?

Pour ma part j'ai longtemps souhaité avoir la possibilité d'appliquer un filtre sur mes images telles que le Blur pour le background d'un site, ou passer une image en noir et blanc ou sépia.

Bien entendu Photoshop et ses amis sont là pour nous faire de superbes images, mais il y à un jour où l'on souhaite modifier à la volée ces filtres sans avoir à faire des rollover avec plusieurs images.

C'est avec un grand plaisir que je viens de découvrir les filtres CSS3.

J'en connais déjà qui vont me dire que je suis à la bourre, c'est vrai mais il vaut mieux tard que jamais.

Un peu de lecture

Commençons d'abord par un peu de lecteur avec un tutoriel de Paul Underwood traduit en français par Sébastien Germez

Passons à la pratique

Pour suivre le tutoriel de l'article ci-dessus je vous propose de tester le blur (flou gaussien), suivi d'un passage d'un dégradé de gris, puis en sépia.

Le filtre CSS 3 "Blur"

Le blur prend en prend en paramètre le nombre de pixel qu'il appliquera pour effectuer le flou. Plus le nombre est haut plus l'image sera floutée.

La prototype officiel est le suivant :

filter: blur(x px);

Les prototypes spécifiques aux navigateurs le temps de leur support officiel

Webkit : Chrome et Safari

-webkit-filter: blur(x px);

Firefox

-moz-filter: blur(x px);

Opéra

-o-filter: blur(x px);

Internet Explorer

-ms-filter: blur(x px);

Pour un flou de 2px nous aurons la déclaration suivante :

filter: blur(2px);
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
L'image originale
Utilisez les filtres CSS3 pour modifier vos images

Blur 2px

Blur 5px

Le filtre CSS 3 "Grayscale"

Le filtre grayscale prend en valeur comme pour l'opacité une valeur entre 0.0 et 1.

Plus la valeur est proche de 1 plus le dégradé de gris sera prononcé.

La prototype officiel est le suivant :

filter: grayscale(x);

Les prototypes spécifiques aux navigateurs le temps de leur support officiel

Webkit : Chrome et Safari

-webkit-filter: grayscale(x);

Firefox

-moz-filter: grayscale(x);

Opéra

-o-filter: grayscale(x);

Internet Explorer

-ms-filter: grayscale(x);

Pour un dégradé de gris à 50% nous aurons la déclaration suivante :

filter: grayscale(0.5);
-webkit-filter: grayscale(0.5);
-moz-filter: grayscale(0.5);
-o-filter: grayscale(0.5);
-ms-filter: grayscale(0.5);

L'image originale

Grayscale 50%

Grayscale 100%

Le filtre CSS 3 "Sepia"

Le filtre Sepia est comme le filtre grayscale il prend en valeur comme pour l'opacité une valeur entre 0.0 et 1.

Plus la valeur est proche de 1 plus la coloration sera prononcée.

La prototype officiel est le suivant :

filter: sepia(x);

Les prototypes spécifiques aux navigateurs le temps de leur support officiel

Webkit : Chrome et Safari

-webkit-filter: sepia(x);

Firefox

-moz-filter: sepia(x);

Opéra

-o-filter: sepia(x);

Internet Explorer

-ms-filter: sepia(x);

Pour un sépia à 50% nous aurons la déclaration suivante :

filter: sepia(0.5);
-webkit-filter: sepia(0.5);
-moz-filter: sepia(0.5);
-o-filter: sepia(0.5);
-ms-filter: sepia(0.5);

L'image originale

Sepia 30%

Sepia 50%

Sepia 100%

Contrôlons la compatibilité des navigateurs

Comme toutes les nouveautés CSS 3 il faut se méfier de son support sur les navigateurs. Pour cela je vous invite à faire un petit tour sur Can I use CSS Filter Effects

Parce qu'on est feignant

Nous allons très vite trouver des outils en ligne pour générer le code CSS correspondant à vos besoins, nous pouvons déjà commencer avec le CSS Filter Lab d'Adobe, qui vous le remarquerez ne gère pas les déclarations CSS compatibles pour tous les navigateurs.

Place à la créativité

J'espère que ces filtres vont vous donner un tas d'idée pour vos sites et blogs. Nous pouvons même imaginer réaliser quelques filtres à la "Instagram" avec toujours en tête la limitation de nos navigateurs.

N'hésitez pas à me faire par de vos découvertes et de vos essais.