Utilisez les filtres CSS3 pour modifier vos images
Cet article est reposté depuis Dreaminvasion.
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
Les filtres CSS3 appliqués sur des images
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 HTM...
Understanding CSS Filter Effects - HTML5 Rocks
A resource for developers looking to put HTML5 to use today, including information on specific features and when to use them in your apps.
http://www.html5rocks.com/en/tutorials/filters/understanding-css/
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
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
Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.
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.
Close CSS FilterLab uses CSS Filters and custom filters This technology is available in the latest Google Chrome Canary and WebKit nightly builds. To enjoy the full experience you'll need to turn a
http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/
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.