Qu'est-ce que les filtres CSS ?

Honnêtement, il y a des propriétés CSS stupéfiantes, et CSS filters en fait partie. Les filtres ont une capacité étonnante de transformer des images et des pages web tout entières. C'est incroyablement fort quand on y pense, alors même que certains navigateurs ne peuvent toujours pas traiter les border-radius ou les @font-face correctement.

Comment utiliser les filtres CSS ?

L'utilisation des filtres CSS est extrêmement simple, toutefois il faut noter que la syntaxe n'est pas tout à fait habituelle. De nombreuses valeurs prennent des paramètres, et pour de bonnes raisons. Prenons l'exemple d'une échelle de gris (grayscale) et de sa syntaxe.

img {
	-webkit-filter: grayscale(50%);
}

Tout d'abord, il y a un préfixe webkit. Puis la valeur est définie avec des parenthèses et un paramètre. À peu près tous les filtres CSS ont des paramètres, qui définissent la quantité de changement à appliquer. Dans l'exemple qui précède, l'image sera seulement transformée pour 50% en noir et blanc. Si l'on avait 100%, la transformation serait totale (voir l'exemple grayscale plus bas). Une bonne façon de comprendre la logique est de se dire “quel niveau de gris est-ce que je veux atteindre” ? En gros, quelle intensité du filtre est-ce que je veux appliquer.

Les différents types de filtres

Il existe de nombreux filtres, certains plus habituels que d'autres, certains plus utiles que d'autres aussi. Mais dans cet article, nous allons essayer d'en passer en revue le plus possible, pour vous donner une bonne idée des possibilités des filtres CSS. Notre image de démo aujourd'hui est cette magnifique photo de voiture que j'ai prise il y a peu...

Grayscale

Je viens de mentionner grayscale. Il transforme une image en noir et blanc, selon un pourcentage qui va de 0% à 100% où 0% correspond à aucun filtre et 100% à un filtre total - il ne reste plus que du noir, du gris et du blanc.

img { -webkit-filter: grayscale(100%); }
img { -webkit-filter: grayscale(50%); }

Sepia

Je ne sais pas si on applique encore beaucoup ce type d'effet, mais si vous le voulez, il est là. Son utilisation est identique à celle de grayscale.

img { -webkit-filter: sepia(100%); }
img { -webkit-filter: sepia(50%); }

Blur

Le filtre blur (floutage) fonctionne d'une manière assez similaire au filtre Gaussien de Photoshop. Le nombre de pixels définit l'intensité du floutage, plus le nombre de pixels est grand, plus l'image sera floue.

img { -webkit-filter: blur(5px); }
img { -webkit-filter: blur(50px); }

Saturation

Si vous connaissez la théorie des couleurs, vous savez que la saturation définit l'intensité de la couleur. Contrairement aux filtres précédents, celui-ci n'a pas de limite, vous pouvez spécifier ce que vous voulez, par exemple 200% ou 2000%, plus le pourcentage sera élevé, plus la couleur sera vive. Entre 0% et 100%, la couleur devient plus terne, et à 100% l'image est inchangée.

img { -webkit-filter: saturate(20%); }
img { -webkit-filter: saturate(200%); }
img { -webkit-filter: saturate(2000%); }

Contrast

Ce filtre fonctionne un peu comme la saturation, il n'y a pas de limite au pourcentage appliqué. Entre 0% et 100% vous choisissez un contraste faible, vous donne l'image inchangée et au-delà vous passez à un contraste fort.

img { -webkit-filter: contrast(50%); }
img { -webkit-filter: contrast(500%); }

Brightness

Ce filtre est le dernier de cette série de trois. Il fonctionne comme saturation et contrast, entre 0% et 100% l'image est moins lumineuse, au-delà elle l'est plus, et la valeur par défaut est 100%.

img { -webkit-filter: brightness(50%); }
img { -webkit-filter: brightness(500%); }

Hue-rotation

Celui-ci est intéressant, il prend la roue des couleurs (voir l'article utiliser HSL) et la fait tourner du nombre de degrés que vous indiquez, en modifiant chacune des couleurs en fonction. Les valeurs vont de 0° à 360°.

img { -webkit-filter: hue-rotate(45deg); }
img { -webkit-filter: hue-rotate(120deg); }
img { -webkit-filter: hue-rotate(240deg); }

Invert

Comme son nom le suggère, ce filtre inverse les couleurs de l'image. Il fonctionne comme grayscale avec des valeurs comprises entre 0% et 100%. Il faut donc juste indiquer le niveau de l'effet que vous souhaitez appliquer à votre image.

img { -webkit-filter: -webkit-filter: invert(100%); }

Les limites des filtres CSS

👉🏾 NdT : Pour vérifier la compatibilité, il suffit comme toujours de consulter Can I Use. À la date de traduction, IE est totalement incompatible, Firefox est partiellement compatible, mais la compatibilité de Chrome, Safari et Opera, y compris pour les versions mobiles, est excellente. Aujourd'hui elle est excellente chez tous.

Vitesse de chargement

Deuxième point auquel il faut être attentif, le temps de chargement de votre page peut être affecté. Les filtres CSS peuvent être appliqués à de nombreux éléments, pas seulement aux images. Plus vous en ajoutez, plus votre site risque d'être ralenti - c'est compréhensible dans la mesure où la manipulation des éléments est plus complexe que les opérations habituelles de CSS.

Utilité

Dernier point, et au vu de ce qui précède, on peut se poser la question de savoir s'il ne vaut pas mieux ouvrir Photoshop et faire le travail en amont. Cela dit, la possibilité d'éditer les images dans le navigateur est géniale alors pourquoi pas ?

👉🏾 NdT : Oui les filtres sont utiles : ils s'appliquent à toutes sortes d'images, y compris celles produites en CSS, où Photoshop ne vous sera d'aucun secours. Voyez l'article de Donovan Hutchinson sur la création de sphères en CSS pour une utilisation (simple) du filtre CSS blur.

Plus vous en savez

Maintenant que vous savez de quoi il s'agit, j'espère que vous appréciez leurs capacités étonnantes. C'est un grand progrès en termes de ce que HTML, CSS et nos navigateurs peuvent faire pour nous.