IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Les filtres CSS3 : modifier le HTML ou les images en CSS

Image non disponible

Image non disponible

Les filtres CSS3 sont une récupération intéressante de SVG. Ils vous permettent d'appliquer, à des éléments HTML ou des images, des flous, de la luminosité et beaucoup d'autres effets. Dans cet article, nous allons voir précisément comment ils vont fonctionner.

Cet article a été traduit avec l'aimable autorisation de InsertHTML. L'article original : CSS3 Filters: Altering HTML and Images with just CSS peut être vu sur le site de InsertHTML.

3 commentaires Donner une note à l´article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur : Profil ProSite personnel

Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

Comment cela fonctionne

Avec du simple CSS, nous pouvons appliquer des effets assez élaborés. Ils sont supposés s'appliquer aussi bien à des images qu'à des éléments HTML, mais manifestement, le support des navigateurs est variable. La propriété utilisée pour gérer cela est filter.

 
Sélectionnez
filter: filter(value);

Comme vous devez vous en douter, les préfixes vendeurs sont requis. Pour le moment (N.D.T : article original publié en juin 2012), seul -webkit- (Chrome et Safari) reconnaît ces propriétés.

 
Sélectionnez
-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

Les filtres

Il existe différents types de filtres, pour permettre d'avoir une bonne idée de ce qu'ils réalisent, nous les verrons individuellement. Différents filtres peuvent être appliqués, séparés par un espace, par exemple brightness et blur:

 
Sélectionnez
filter: blur(5px) brightness(0.5);

Il existe certains filtres dont je ne parlerai pas car ils peuvent être obtenus avec d'autres propriétés CSS, comme l'opacité et les ombres portées.

Voici l'image originale sur laquelle nous allons appliquer les filtres :

Image non disponible

Je vous montrerai la photo originale (la première) et ce à quoi devrait ressembler l'application du filtre (la seconde), vous pourrez voir la différence même si votre navigateur ne reconnaît pas les filtres.

Flou

Image non disponible Image non disponible

Vous avez toujours voulu appliquer un flou gaussien sur une image ou du texte uniquement en CSS ? Avec les filtres, c'est désormais possible ! Le flou est mesuré en pixels, vous pouvez donc faire quelque chose comme ça :

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

filter: blur(5px);

Luminosité

Image non disponible Image non disponible

La luminosité est comprise entre zéro et un, 1 correspondant à une luminosité maximale (blanc) et 0 à la valeur originale.

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: brightness(0.2);
-moz-filter: brightness(0.2);
-o-filter: brightness(0.2);
-ms-filter: brightness(0.2);

filter: brightness(0.2);

Saturation

Image non disponible Image non disponible

Mesurée en pourcentage avec le mot clé saturate().

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

filter: saturate(50%);

Rotation de teinte

Image non disponible Image non disponible

Cet effet est assez intéressant. Il vous permet d'altérer les teintes par rotation (imaginez une roue colorimétrique que vous pouvez faire pivoter). La valeur est mesurée en degrés.

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: hue-rotate(20deg);
-moz-filter: hue-rotate(20deg);
-o-filter: hue-rotate(20deg);
-ms-filter: hue-rotate(20deg);

filter: hue-rotate(20deg);

Contraste

Image non disponible Image non disponible

Mesuré aussi en pourcentage. 100 % est la valeur initiale, 0 % va créer une image entièrement noire. Toute valeur au-delà de 100 % ajoute du contraste.

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: contrast(150%);
-moz-filter: contrast(150%);
-o-filter: contrast(150%);
-ms-filter: contrast(150%);

filter: contrast(150%);

Inversion

Image non disponible Image non disponible

La mesure du taux d'inversion souhaité sur l'image. Étonnamment, webkit n'accepte pas, à l'heure actuelle, les valeurs inférieures à 100 %.

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

filter: invert(100%);

Nuances de gris

Image non disponible Image non disponible

Ici encore, la mesure correspond au niveau de gris que vous souhaitez obtenir, de 0 % à 100 %.

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

filter: grayscale(100%);

Sépia

Image non disponible Image non disponible

Le sépia est certainement très utile si vous souhaitez poster sur Instagram, mais je suppose que dans ce cas, vous n'aurez pas besoin de CSS. Comme pour les nuances de gris ou l'inversion, la valeur correspond au taux de sépia que vous souhaitez ajouter, de 0 % (image initiale) à 100 % (sépia complet).

 
Sélectionnez
/* Préfixes vendeurs */
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);

filter: sepia(100%);

Remerciements

Cet article a été traduit avec l'aimable autorisation de InsertHTML. L'article original : CSS3 Filters: Altering HTML and Images with just CSS peut être vu sur le site de InsertHTML.

Nous tenons à remercier Gurdil le nain et _Max_ pour leur relecture attentive de cet article.

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 Johnny Simpson. Aucune reproduction, même partielle, ne peut être faite de ce site ni 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.