Le terme “filtre” est souvent associé à Instagram et autres plateformes permettant d’altérer une image en lui appliquant un ou plusieurs filtres. Cependant, il est aussi possible d’appliquer des filtres directement en CSS à un élément!
Filtres disponibles
nonepar défaut.blur()(flou) Valeur acceptant toutes les unités de mesurebrightness()(luminosité) valeur en pourcentagecontrast()(contraste) valeur en pourcentagedrop-shadow()(ombre portée) même format que box-shadowgrayscale()(niveau de gris) valeur en pourcentagehue-rotate()(rotation de la teinte) valeur en degrésinvert()(inverser) valeur en pourcentageopacity()(opacité) valeur en pourcentagesaturate()(saturation) valeur en pourcentagesepia()(sépia) valeur en pourcentageetc.
filter
La propriété filter permet d’ajouter des effets visuels à un élément. Ce filtre impactera non seulement l'élément, mais aussi tout son contenu.
Pour définir un nouveau filtre, il suffit de passer à un des filtres mentionnés ci-dessus ☝️ avec une valeur entre parenthèses.
Remarquez comment l’extrait de code devient flou lorsque l’option blur() est sélectionnée. Ceci est du au fait que l’extrait de code est à l’intérieur de l’élément auquel le filtre est appliqué.
Combinaison
Il est possible de combiner plusieurs filtres ensemble simplement en les séparant par un espace.
Par exemple, pour obtenir un élément flou en noir et blanc, il est possible de faire:
.element {
filter: blur(5px) grayscale(100%);
}backdrop-filter
La propriété backdrop-filter permet elle aussi d'ajouter des effets visuels, mais uniquement entre un élément et son arrière-plan. Il est donc nécessaire que l'élément en question soit ne soit pas entièrement opaque afin de pouvoir voir une partie de l'élément arrière-plan.
Par exemple, un carré blanc ⚪️ avec une opacité de 30% afin de voir une partie de l'image en arrière-plan, soit background-color: rgba(255, 255, 255, 0.3);.