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

| Johnny Simpson | Bovino |

Traducteur

Didier Mouronval

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.

Commentez

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

- Auteurs : Johnny Simpson, Bovino

- Traducteur : Didier Mouronval

- Parution : 27 juin 2012

- Licence : 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 et 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.

Sommaire

- Comment cela fonctionne

- Les filtres

- Flou

- Luminosité

- Saturation

- Rotation de teinte

- Contraste

- Inversion

- Nuances de gris

- Sépia

- Remerciements

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.

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

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:

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.

Flou

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

Luminosité

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

Saturation

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%);

Rotation de teinte

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

Contraste

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%);

Inversion

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%);

Nuances de gris

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%);

Sépia

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%);

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.