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

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.

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.

-webkit-filter: filter(value);
-moz-filter: filter(value);
-o-filter: filter(value);
-ms-filter: filter(value);

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:

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 :

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.

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 :

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

filter: blur(5px);

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

/* 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);

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

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

filter: saturate(50%);

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.

/* 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);

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.

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

filter: contrast(150%);

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

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

filter: invert(100%);

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

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

filter: grayscale(100%);

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).

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

filter: sepia(100%);

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.