Podcast CSS – 023: Filtres
Supposons que vous deviez créer un élément avec un effet de verre dépoli légèrement opaque posé au-dessus d'une image. Le texte doit être en direct et non une image. Comment procéder ?
Une combinaison de filtres CSS et de backdrop-filter nous permet d'appliquer des effets et de flouter les éléments nécessaires en temps réel.
Le flou et l'opacité sont deux des nombreux filtres disponibles. Examinons rapidement leur fonction et leur utilisation.
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é.
Il doit s'agir d'une unité de longueur, telle que 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 valeur de luminosité est exprimée en pourcentage, l'image non modifiée étant exprimée par une valeur de 100%. Une valeur de 0% rend l'image complètement noire. Par conséquent, une valeur comprise entre 0% et 100% réduit la luminosité de l'image. 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 diminuer ou augmenter le contraste, respectivement.
.my-element {
filter: contrast(160%);
}
grayscale
Vous pouvez appliquer un effet complètement 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 pourcentages ou des valeurs décimales pour n'appliquer qu'un effet de nuances de gris partiel.
Si vous ne transmettez aucun argument, l'élément sera complètement affiché 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, dans laquelle 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 "Saturate" (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 ton sépia avec 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 pour sepia(), ce qui augmente ou diminue l'effet.
Ne transmettre aucun argument ajoute 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 que la teinte dans hsl fait référence à une rotation de la roue chromatique. Ce filtre fonctionne de la même manière.
Si vous transmettez un angle, tel que des degrés ou des virages, la teinte de toutes les couleurs de l'élément est déplacée et la partie de la roue chromatique à laquelle il fait référence est modifiée. Si vous ne transmettez aucun argument, la requête n'a aucun effet.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Vous pouvez appliquer une ombre projetée qui épouse les courbes 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 la rend 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", "Blur" 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 Ombres.
url
Le filtre url vous permet d'appliquer un filtre SVG à partir d'un élément ou d'un fichier SVG associé.
Pour en savoir plus sur les filtres SVG, cliquez ici.
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 figurant au début de cette leçon est parfait, car vous ne souhaitez pas que le texte soit flouté et, idéalement, vous n'avez pas à ajouter d'éléments HTML supplémentaires. La possibilité d'appliquer des filtres uniquement au fond permet cela.
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