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.