FiltresLe 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!
- 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.
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.
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:
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);.