filter

La propriété filter permet d'appliquer des filtres et d'obtenir des effets graphiques de flou, de saturation, etc. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou des bordures.

Plusieurs fonctions sont inclues dans le standard CSS et permettent d'obtenir des effets prédéfinis.

blur()	Applique un flou
brightness()	Modifie la luminosité
contrast()	Règle le contraste
drop-shadow()	Applique une ombre portée
grayscale()	Passe l'image en niveau de gris
hue-rotate()	Applique une rotation de teinte
invert()	Inverse les couleurs
opacity()	Règle l'opacité de l'image
saturate()	Sature l'image d'entrée
sepia()	Convertit l'image en sépia

L'image ci-dessous va servir de modèle.





filter: blur(3px);

Cette fonction applique un flou gaussien à l'image d'entrée. La valeur du paramètre correspond au rayon de flou (l'écart-type de la gaussienne) utilisé. Plus la valeur est importante, plus le flou sera prononcé.

Cette fonction n'accepte pas les pourcentages.

 Haut de page 


filter: brightness(150%);

Cette fonction permet de modifier la luminosité d'une image grâce à un facteur linéaire. Un argument égal 0% créera une image totalement noire et une valeur de 100% conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% afin d'obtenir des images saturées en luminosité. La valeur par défaut pour l'argument est 1.

Une valeur de 50% peut être remplacée par 0.5.

 Haut de page 


filter: contrast(400%);

Cette fonction permet d'ajuster le contraste de l'image d'entrée. Une valeur de 0% créera une image entièrement grise. Une valeur de 100% conservera l'image d'entrée telle quelle. Il est possible d'utiliser des valeurs supérieures à 100% pour augmenter le contraste. La valeur par défaut de l'argument est 1.

Les 400% de l'exemple peuvent être remplacés par 4.

 Haut de page 


filter: drop-shadow(5px 5px 3px black);

Cette fonction permet d'appliquer une ombre portée à l'image d'entrée. Une ombre portée est une version décalée, dans une couleur donnée, du canal alpha de l'image qui est affiché sous celle-ci.

La première valeur représente le décalage horizontal, la deuxième valeur correspond au décalage vertical. La troisième valeur indique l'étendue du flou. Si cette dernière est omise, l'ombre sera nette. Enfin, la dernière valeur est la couleur de l'ombre. Si elle est omise, c'est currentcolor qui sera utilisé.

Des valeurs négatives peuvent être utilisée pour le décalage horizontal et pour le décalage vertical.

 Haut de page 


filter: grayscale(100%);

L'image d'entrée est convertie en niveau de gris. La valeur de l'argument définit la force de cette conversion. En utilisant une valeur de 100% sera complètement en niveaux de gris. 0% conservera l'image telle quelle. La valeur par défaut du paramètre est 0.


Les valeurs admises sont les nombres décimaux compris entre 0 et 1 et les pourcentages de 0% à 100%.

 Haut de page 


filter: hue-rotate(45deg);

Cette fonction applique une rotation de teinte à l'image d'entrée. La valeur de l'angle passé en argument définit le nombre de degrés parcouru sur le cercle des couleurs. Une valeur de 0deg conservera l'image telle quelle. La valeur par défaut du paramètre est 0deg.

 Haut de page 


filter: invert(100%);

Cette fonction permet d'inverser les couleurs de l'image d'entrée. La valeur de l'argument définit la force de cette inversion. Une valeur de 100% inversera complètement les couleurs (tel un négatif) et une valeur 0% conservera l'image d'entrée telle quelle. La valeur par défaut de l'argument est 0.

Les pourcentages peuvent être remplacés par des valeurs décimales comprises entre 0 et 1.

 Haut de page 


filter: opacity(30%);

Cette fonction permet de régler l'opacité de l'image d'entrée. La valeur de l'argument indique la force de l'opacité. Ainsi, une valeur de 0% rendra l'image complètement transparente et une valeur de 100% conservera l'image telle quelle. Les valeurs intermédiaires appliqueront des effets proportionnels. La valeur par défaut de l'argument est 1.

Les pourcentages peuvent être remplacés par des valeurs décimales comprises entre 0 et 1.

 Haut de page 


filter: saturate(300%);

L'image d'entrée est saturée. La valeur de l'argument indique la force de la saturation. Une valeur de 0% fera que l'image sera totalement plate et une valeur de 100% conservera l'image d'entrée telle quelle. Les valeurs intermédiaires auront un effet linéaire. Il est possible d'utiliser des valeurs supérieures à 100% pour obtenir un effet de sursaturation. La valeur par défaut de l'argument est 1.

Les pourcentages peuvent être remplacés par des valeurs décimales comprises entre 0 et 1.

 Haut de page 


filter: sepia(100%);

L'image d'entrée est convertie en sépia. La valeur de l'argument définit la proportion de la conversion. Ainsi, si on utilise un argument égal à 100%, le résultat sera entièrement sépia et si on utilise une valeur de 0%, l'image d'entrée sera inchangée. Les valeurs comprises entre 0% et 100% appliquent l'effet de façon linéaire. La valeur par défaut de l'argument est 0.

Les pourcentages peuvent être remplacés par des valeurs décimales comprises entre 0 et 1.

 Haut de page 
On peut appliquer autant de fonctions que nécessaire pour manipuler le rendu obtenu. Il suffit de les enchaîner en les séparant par un espace.

filter: saturate(400%) invert(100%);


 Haut de page