Podcast CSS – 023: Filters
Supposons que vous deviez créer un élément avec un effet de verre dépoli légèrement opaque qui se superpose à une image. Il doit s'agir de texte en direct et non d'une image. Comment procéder ?
La combinaison de filtres CSS et de backdrop-filter nous permet d'appliquer des effets et de flouter ce qui est nécessaire en temps réel.
Le flou et l'opacité sont deux des nombreux filtres disponibles.
Voyons rapidement à quoi ils servent et comment les utiliser.
Propriété filter
Vous pouvez appliquer un ou plusieurs des filtres suivants en tant que valeur pour filter.
Si vous appliquez un filtre de manière incorrecte, les autres filtres définis pour filter ne fonctionneront pas.
blur
Cela applique un flou gaussien et le seul argument que vous pouvez transmettre est un radius, qui correspond au niveau de flou appliqué.
Vous devez saisir une unité de longueur, par exemple 10px. Les pourcentages ne sont pas acceptés.
.my-element {
filter: blur(0.2em);
}
brightness
Pour augmenter ou diminuer la luminosité d'un élément, utilisez la fonction de luminosité. La luminosité est exprimée en pourcentage et l'image inchangée est exprimée sous la forme d'une valeur de 100%. Avec une valeur de 0 %, l'image devient complètement noire. Par conséquent, des valeurs comprises entre 0% et 100% la rendent moins lumineuse. Utilisez des valeurs supérieures à 100% pour augmenter la luminosité.
.my-element {
filter: brightness(80%);
}
contrast
Définissez une valeur comprise entre 0% et 100% pour réduire ou augmenter le contraste, respectivement.
.my-element {
filter: contrast(160%);
}
grayscale
Vous pouvez appliquer un effet entièrement en nuances de gris en utilisant 1 comme valeur pour grayscale(), ou 0 pour avoir un élément complètement saturé.
Vous pouvez également utiliser des valeurs décimales ou des pourcentages pour n'appliquer qu'un effet de nuances de gris partiel.
Si vous ne transmettez aucun argument, l'élément s'affichera entièrement en nuances de gris.
Si vous transmettez une valeur supérieure à 100%, elle sera plafonnée à 100%.
.my-element {
filter: grayscale(80%);
}
invert
Tout comme grayscale, vous pouvez transmettre 1 ou 0 à la fonction invert() pour l'activer ou la désactiver. Lorsqu'elle est activée, les couleurs de l'élément sont complètement inversées.
Vous pouvez également utiliser des pourcentages ou des valeurs décimales pour n'appliquer qu'une inversion partielle des couleurs.
Si vous ne transmettez aucun argument à la fonction invert(), l'élément sera complètement inversé.
.my-element {
filter: invert(1);
}
opacity
Le filtre opacity() fonctionne comme la propriété opacity, où vous pouvez transmettre un nombre ou un pourcentage pour augmenter ou réduire l'opacité.
Si vous ne transmettez aucun argument, l'élément est entièrement visible.
.my-element {
filter: opacity(0.3);
}
saturate
Le filtre de saturation est très semblable au filtre brightness et accepte le même argument : nombre ou pourcentage.
Au lieu d'augmenter ou de diminuer l'effet de luminosité, saturate augmente ou diminue la saturation des couleurs.
.my-element {
filter: saturate(155%);
}
sepia
Vous pouvez ajouter un effet de tonalité sépia à l'aide de ce filtre qui fonctionne comme grayscale().
Le ton sépia est une technique d'impression photographique qui convertit les tons noirs en tons marron pour les réchauffer.
Vous pouvez transmettre un nombre ou un pourcentage en tant qu'argument de sepia(), ce qui augmente ou diminue l'effet.
Si vous ne transmettez aucun argument, vous ajoutez un effet sépia complet (équivalent à sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
Dans la leçon sur les couleurs, vous avez appris comment la teinte dans hsl référence une rotation de la roue chromatique. De plus, ce filtre fonctionne de manière similaire.
Si vous transmettez un angle, tel que des degrés ou des virages, la teinte de toutes les couleurs de l'élément est modifiée, ce qui modifie la partie de la roue chromatique à laquelle il fait référence. Si vous ne transmettez aucun argument, il n'a aucun effet.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Vous pouvez appliquer une ombre projetée qui longe la courbe comme vous le feriez dans un outil de conception, tel que Photoshop avec drop-shadow.
Cette ombre est appliquée à un masque alpha, ce qui est très utile pour ajouter une ombre à une image en découpe.
Le filtre drop-shadow utilise un paramètre d'ombre qui contient les valeurs "offset-x", "offset-y", "flou" et "color" séparées par des espaces.
Elle est presque identique à box-shadow, mais le mot clé inset et la valeur de répartition ne sont pas acceptés.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Pour en savoir plus sur les différents types d'ombres, consultez le module Shadows.
url
Le filtre url vous permet d'appliquer un filtre SVG à partir d'un élément ou d'un fichier SVG associé.
En savoir plus sur les filtres SVG
Filtre Backdrop
La propriété backdrop-filter accepte toutes les valeurs de fonction de filtre identiques à filter.
La différence entre backdrop-filter et filter est que la propriété backdrop-filter n'applique les filtres qu'à l'arrière-plan, où la propriété filter les applique à l'ensemble de l'élément.
L'exemple présenté au début de cette leçon est le parfait exemple, car vous ne voulez pas que le texte soit flouté et, idéalement, vous n'avez pas besoin d'ajouter d'éléments HTML supplémentaires. Pour cela, il est possible d'appliquer des filtres uniquement au fond.
Testez vos connaissances
Tester vos connaissances sur les filtres
Parmi les propositions suivantes, lesquelles sont des fonctions de filtre CSS ?
grayscale()invert()flip()multiply()blur()brightness()Le CSS peut-il utiliser des filtres SVG ?
url() permet