CSS3 : les filtres
Publié le par Évolution de l’actuelle version 2.1, le CSS3 apporte pas mal de nouveautés en ce qui concerne les styles : ombrages, animations, filtres, etc. Bien qu’étant encore officiellement en cours de développement, la plupart des fonctionnalités du CSS3 est déjà supporté dans les navigateurs actuels.
Dans cet article, nous allons voir plus en détails le fonctionnement des filtres CSS3. A l’instar de certaines applications sur smartphones qui permettent d’appliquer des filtres sur des photos, on retrouve ici le même principe, à savoir appliquer des filtres sur tout type d’élément HTML : des images, du texte, un dessin en SVG, des boutons, etc.
Tour d’horizon
Pour appliquer un filtre sur un élément HTML, on passe par la propriété filter. Cette propriété reçoit comme « valeur » une fonction correspondant à l’effet que l’on souhaite appliquer. Cette fonction contient également un ou plusieurs paramètres.
Attention, cette propriété n’a strictement rien à voir avec l’ancienne propriété du même nom qui était uniquement supporté dans les anciennes versions d’Internet Explorer pour appliquer des effets DirectX. Dans cet article, nous ne détaillerons pas le fonctionnement de la version non-standard de cette propriété.
Un filtre CSS3 s’utilise de la manière suivante :
filter: function(value);
filter: function(value1 value2 value3 ...);Il est également possible d’appliquer plusieurs filtres en même temps :
filter: function1(value) function2(value) function3(value) ...Selon les navigateurs, il est possible que cette propriété requiert un préfixe. Par exemple, sous Chrome, c’est la propriété -webkit-filter qu’il faudra utiliser.
Flou gaussien
La fonction blur() permet d’appliquer un flou gaussien :
filter: blur(10px);Cette fonction reçoit en paramètre un nombre de pixels. Plus la valeur sera grande, plus l’élément HTML sera flouté.
Niveaux de gris
La fonction grayscale() permet d’appliquer un effet noir-et-blanc :
filter: grayscale(100%);Cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Une valeur de 100% produit une image en niveaux gris, alors qu’à 50%, l’image sera colorée, mais les couleurs seront plus ternes. Ce paramètre peut être omis, la valeur par défaut sera dans ce cas 100%.
Sépia
Similaire à la fonction grayscale(), la fonction sepia() permet d’appliquer un effet façon « photo ancienne », soit un effet similaire aux niveaux de gris, mais avec des variations de brun :
filter: sepia(100%);Cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Une valeur de 100% produit une image en sépia. A 50%, l’image sera colorée, mais les couleurs seront plus ternes et légèrement teintées de brun. Ce paramètre peut être omis, la valeur par défaut sera dans ce cas 100%.
Négatif
La fonction invert() permet d’appliquer un effet de négatif :
filter: invert(100%);Comme avec la fonction grayscale(), cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Une valeur de 100% produira une image entièrement en négatif. Ce paramètre peut être omis, la valeur par défaut sera 100%.
Opacité
La fonction opacity() permet d’appliquer un effet de transparence :
filter: opacity(50%);Cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Plus la valeur sera proche de 0%, plus l’élément HTML sera transparent.
Saturation
La fonction saturate() permet de saturer les couleurs d’un élément HTML, pour les rendre plus vives :
filter: saturate(500%);Cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Une valeur au dessus de 100% aura pour effet de saturer les couleurs. Une valeur en dessous de 100% aura l’effet inverse : les couleurs seront plus ternes.
Luminosité
La fonction brightness() permet d’ajuster la luminosité d’un élément HTML :
filter: brightness(50%);Cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Une valeur en dessous 100% aura pour effet de diminuer la luminosité. Au delà de 100%, la luminosité sera plus forte.
Contraste
La fonction contrast() permet d’ajuster le contraste d’un élément HTML :
filter: contrast(350%);Cette fonction reçoit en paramètre un pourcentage qui permet de régler l’intensité de l’effet. Une valeur en dessous 100% aura pour effet de diminuer le contraste. Au delà de 100%, le contraste sera plus forte.
Rotation des couleurs
La fonction hue-rotate() permet de jouer sur la teinte des couleurs :
filter: hue-rotate(120deg);Cette fonction reçoit en paramètre un angle, comprise entre 0 et 360 degrés.
Ombre portée
La fonction drop-shadow() permet d’appliquer une ombre portée à un élément HTML :
filter: drop-shadow(2px 2px 8px #000000);Cette fonction reçoit 4 paramètres :
- offset-x et offset-y : définissent le décalage de l’ombre portée;
- blur-radius (optionnel) : définit l’intensité de l’effet de flou;
- color (optionnel) : définit la couleur de l’ombre portée.
Filtres SVG
La fonction url() permet d’appliquer un effet que l’on aura défini par l’intermédiaire du langage SVG. Nous ne détaillerons pas ce type de filtre dans cet article. A la place, je vous conseille la lecture de cet article du site Mozilla Developer Network : https://developer.mozilla.org/fr/docs/Web/SVG/Application_d_effets_SVG_a_du_contenu_HTML.
filter: url(effet.svg);Cette fonction reçoit pour paramètre un chemin ou une ancre pointant vers le fichier SVG contenant l’effet.