Les filtres CSS permettent d'appliquer des effets sur des images en particulier et sur n'importe quel élément en général directement dans votre document HTML. Plus besoin de passer par un éditeur graphique ou d'utiliser du JavaScript.
Selon la spécification , un effet de filtre est une opération graphique appliquée à un élément lors de sa composition dans le document. Nous pouvons distinguer trois types de filtres :
-Les filtres raccourcis CSS (voir la liste plus bas)
-Les shaders (ou filtres personnalisés) : il existe deux types de shader. Les "vertex shaders" (.vs), permettant le déplacement et la déformation des sommets d'un polygone. Les "fragment shaders"(.fs), qui permettent de modifier le rendu des pixels d'un objet. Cependant, les shaders ont été abandonnés.
Liste des filtres CSS :
Il existe dix filtres raccourcis en CSS basés sur les primitives de filtres SVG, listés ci-dessous.
Actuellement, tous les navigateurs modernes supportent les filtres sans préfixe. Vous pouvez vérifier sur Can I Use .
Effet grayscale
Effet blur
Effet sépia
Effet hue-rotate
Effet drop-shadow
Effet invert
Effet brightness
Effet opacity
Effet contrast
Effet saturate
A ces filtres raccourcis, nous avons également la possibilité de créer des filtres avancés grâce à la fonction url(), que nous verrons plus bas dans l'article.
Syntaxe des filtres CSS :
Pour créer un effet de filtre en CSS, on utilisera la propriété CSS filter. La syntaxe est assez simple, comme vous pouvez le constater :
Lorsque vous utilisez un filtre CSS sur un élément, sachez qu'un nouveau contexte d'empilement est créé.
Fonction des filtres CSS :
Comme nous l'avons dit, les filtres CSS sont des raccourcis qui s'appuient sur les primitives de filtre SVG, hormis la fonction url(). La fonction drop-shadow(), quant à elle, est une combinaison de primitives.
La partie qui suit est assez technique, mais nécessaire pour bien comprendre les effets que peuvent produire les fonctions et comment bien les utiliser.
Les filtres de couleurs
- La fonction grayscale() convertit un élément en niveaux de gris. Il est possible d'utiliser aussi bien des pourcentages (maximum de 100%) que des nombres entiers ou décimaux (de 0 à 1). Si vous ne déclarez pas de valeur, dans ce cas, l'effet sera de 100%.
- La fonction sepia() convertit les tons noirs en tons bruns pour les réchauffer. Elle fonctionne de la même manière que la fonction grayscale().
- La fonction hue-rotate() modifie la teinte de chaque pixel de l'élément selon la valeur spécifiée. L'angle est défini en degrés compris entre zéro et 360.
- La fonction saturate() permet de saturer ou désaturer un élément. Les nombres entiers ou décimaux, ainsi que les pourcentages sont acceptés. Vous pouvez définir une valeur supérieure à 100%. En réglant la valeur à 0, cela équivaut à un niveau de gris à 100%, tandis qu'en définissant la fonction à 100%, aucun effet ne se produira.
Les filtres d'ajustements
- La fonction brightness() permet d'augmenter ou de diminuer la luminosité d'un élément. Les valeurs s'expriment en nombres entiers ou décimaux ainsi qu'en pourcentages. Plus la valeur est basse, plus l'image est noire. Une valeur équivalente à 100% ne produit aucun effet.
- La fonction contrast() influe sur les parties claires et foncés d'un élément. Vous pouvez indiquer des nombres entiers ou décimaux et autres pourcentages. Une valeur de 0 donnera un ensemble de gris.
- La fonction invert() applique les couleurs opposées sur la roue chromatique avec des valeurs sous forme de nombres entiers, décimaux ou en pourcentage. A noter qu'une valeur de 50% donnera un ensemble de gris.
- La fonction opacity() permet de rendre un l'élément plus ou moins opaque. Les valeurs s'expriment en nombres entiers, décimaux ou en pourcentage.
Les autres filtres
- La fonction blur() permet d'appliquer un flou gaussien via un rayon qui va déterminer le degré de flou de l'élément d'origine. Celui-ci doit être défini avec une unité de longueur (px, em...), les pourcentages ne sont donc pas acceptés.
- La fonction drop-shadow() équivaut à la propriété CSS box-shadow, mais contrairement à cette dernière qui applique une ombre rectangulaire sur un élément, ce filtre s’adapte aux contours des formes.
Exemple avec la fonction drop-shadow() sur une image au format PNG (avec fond transparent) :
A titre de comparaison, on applique la propriété box-shadow à la même image :
Vous ne pouvez donc que constater l'utilité de la fonction drop-shadow().
Filtres avancés
Les filtres SVG permettent de créer des effets très puissants mais la syntaxe est relativement complexe; voire pompeuse, contrairement aux filtres CSS, plus faciles d'accès mais offrant moins de contrôle.
Néanmoins, voyons un exemple avec un filtre simple contenant une ombre portée. Nous avons trois méthodes à disposition pour le mettre en place sur un élément. A vous de voir celle qui vous convient le mieux.
SVG externe :
Il s'agit de créer un document SVG, d'y insérer l'effet recherché avec l'élément SVG filter, puis de reporter ce document dans le CSS via la fonction url(). Il faudra fournir un identifiant à la fois à l'élement SVG filter, ainsi que dans la fonction CSS url(), comme dans l'exemple qui suit :
img{
filter: url(shadow.svg#ex-shadow)/* on place un identifiant après .svg*/
/*l'indentifiant doit être le même que dans le document svg externe et placé dans l'élément filter*/
}
<img src="image.jpg" alt>
SVG inline :
Il s'agit dans ce cas-ci de placer le filtre SVG directement dans le document HTML.
Vous devez "cacher" le svg en ligne, celui étant présent dans le DOM, il prendra de la place. Vous avez plusieurs possibilités pour le faire ; soit en indiquant une hauteur, ainsi qu'une largeur à zéro, soit en placant le svg en positionnement absolu hors du cadre, soit en déclarant une disposition avec la valeur none. Cependant, cette dernière solution ne fonctionne pas avec Firefox.
Intégration du filtre SVG en CSS
Une autre méthode astucieuse consiste à déclarer le document SVG directement via un chemin url avec la fonction url() :
La propriété filter prend en compte l'ordre des fonctions. Il n'y a pas de virgules entre les différentes fonctions. Si l'une des valeurs dans une fonction est mal renseignée, cela rend le filtre invalide.
La fonction filter()
Nous allons évoquer brièvement cette fonction dans la mesure où son support est très pauvre, ce qui est regrettable. En effet, cette fonction pourrait par exemple nous permettre d'appliquer un effet de filtre d'opacité sur un arrière-plan (mais pas que). A l'heure actuelle, il n'existe toujours pas de propriété CSS pour nous permettre de jouer avec l'opacité sur un arrière-plan.
Nous pouvons animer ou appliquer une transition sur les filtres CSS. Les possibilités sont nombreuses. Voici un premier exemple d'animation de la fonction hue-rotate() :
Ci-dessous, un exemple d'une galerie d'images en accordéon. Lorsqu'on survole une image, celle s'entend tandis que les autres rétrécissent et s'assombrissent via une transition avec un filtre de luminosité :
Encore en l'état de brouillon dans le deuxième niveau du module des effets de filtre, la propriété backdrop-filter permet d'appliquer des filtres CSS sur des arrière-plans donnant un "effet de verre dépoli".
La différence entre la propriété backdrop-filter et la propriété filter réside principalement dans le fait que la première propriété applique uniquement les filtres à l'arrière-plan, tandis que la seconde les applique à l'ensemble de l'élément.
Lorem ipsum dolor
Ut nec justo a diam feugiat pulvinar sit amet suscipit nisl. Quisque et mauris arcu.
Censé fonctionner sur Firefox depuis sa version 103, la propriété est devenue invalide depuis. Nous pouvons néanmoins mettre en place plusieurs solutions de repli.
NB : l’arrière-plan sur lequel on applique la propriété backdrop-filter doit impérativement être semi-transparent, sans quoi l'effet ne fonctionnera pas.
Source, inspiration, ressources :
En complément, je vous invite à jeter un oeil sur cet article concernant les modes de fusion d'images en CSS.
