Filtres

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
  • none par défaut.
  • blur() (flou) Valeur acceptant toutes les unités de mesure
  • brightness() (luminosité) valeur en pourcentage
  • contrast() (contraste) valeur en pourcentage
  • drop-shadow() (ombre portée) même format que box-shadow
  • grayscale() (niveau de gris) valeur en pourcentage
  • hue-rotate() (rotation de la teinte) valeur en degrés
  • invert() (inverser) valeur en pourcentage
  • opacity() (opacité) valeur en pourcentage
  • saturate() (saturation) valeur en pourcentage
  • sepia() (sépia) valeur en pourcentage
  • etc.
Toutes les valeurs en pourcentages (%) peuvent être exprimées en fractions. Par exemple, 50% peut être écrit 0.5. 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%); } Attention, si un filtre est mal défini, tous les autres filtres appliqués à un élément cesseront de fonctionner. filter filter 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 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);.

backdrop-filter
EXERCICE Filtres - Anonymat Pour cet exercice, vous devez rendre une photo d’une personne anonyme grâce aux filtres CSS.
EXERCICE Filtres - Instagram Pour cet exercice, vous devez recréer quelques-uns des filtres les plus populaires de la plateforme Instagram.