Podcast CSS – 023: Filters
Disons que vous devez construire un élément de manière légèrement opaque, effet verre dépoli qui se superpose à une image. Il doit s'agir de texte en direct et non d'une image. Comment procéder ?
Une combinaison de filtres CSS et backdrop-filter
nous permettent 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,
alors passons rapidement en revue ce qu’ils font
tous et comment les utiliser.
Propriété filter
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 radius
,
qui est
le 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Pour augmenter ou diminuer la luminosité d'un élément, utilisez la fonction 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% réduisent la luminosité de l'image. Utilisez des valeurs supérieures à 100% pour augmenter la luminosité.
.my-element {
filter: brightness(80%);
}
contrast
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Définissez une valeur comprise entre 0% et 100% pour réduire ou augmenter le contraste, respectivement.
.my-element {
filter: contrast(160%);
}
grayscale
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez appliquer un effet de nuances de gris entièrement 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Tout comme grayscale
,
vous pouvez transmettre 1
ou 0
à la fonction invert()
pour l'activer ou la désactiver.
Lorsqu'il est activé, 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 est complètement inversé.
.my-element {
filter: invert(1);
}
opacity
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Le filtre opacity()
fonctionne de la même manière que 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Le filtre de saturation est très semblable au filtre brightness
et accepte le même argument:
un nombre ou un 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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 pour 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous avez appris comment la teinte dans hsl
référence une rotation de la roue chromatique dans
colors et ce filtre fonctionnent de la même manière.
Si vous passez un angle, comme des degrés ou des virages,
il change la teinte de toutes
les couleurs de l'élément,
en changeant la partie de la roue chromatique à laquelle elle fait référence. Si vous ne transmettez aucun argument, il n'a aucun effet.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Vous pouvez appliquer une ombre projetée qui suit une courbe comme vous le feriez dans un outil de conception,
comme 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
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Le filtre url
vous permet d'appliquer un filtre SVG à partir d'un élément ou d'un fichier SVG associé.
Vous pouvez
En savoir plus sur les filtres SVG
Filtre Backdrop
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
backdrop-filter
accepte toutes les valeurs de la fonction de filtrage comme filter
.
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
l'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 ?
brightness()
multiply()
invert()
flip()
grayscale()
blur()
Le CSS peut-il utiliser des filtres SVG ?