Filtres

The CSS Podcast - 023: Filters

Imaginons que vous deviez créer un élément avec un effet de verre givré légèrement opaque qui se trouve au-dessus d'une image. Le texte doit être du texte dynamique 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 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.

Remarque : Lorsque vous placez du texte sur des images, assurez-vous qu'il reste lisible si l'effet de filtre n'est pas compatible avec le navigateur de l'utilisateur.

Propriété filter

Browser Support

• 53
• 12
• 35
• 9.1

Source

Vous pouvez appliquer un ou plusieurs des filtres suivants en tant que valeur pour filter. Si vous appliquez un filtre de manière incorrecte, le reste des filtres définis pour filter ne fonctionnera pas.

blur

Cela applique un flou gaussien, et le seul argument que vous pouvez transmettre est un radius, qui correspond à l'intensité du flou. Il doit s'agir d'une unité de longueur, comme 10px. Les pourcentages ne sont pas acceptés.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

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, les 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%);
}

Remarque : Vous pouvez également utiliser des valeurs décimales au lieu de valeurs en pourcentage dans des filtres tels que brightness. Pour définir la luminosité sur 80% avec un nombre décimal, écrivez 0.8.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

Définissez une valeur comprise entre 0% et 100% pour diminuer ou augmenter le contraste, respectivement.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

Vous pouvez appliquer un effet en niveaux de gris complet en utilisant 1 comme valeur pour grayscale() ou 0 pour obtenir un élément complètement saturé. Vous pouvez également utiliser des valeurs de pourcentage ou décimales pour n'appliquer qu'un effet en niveaux de gris partiel. Si vous ne transmettez aucun argument, l'élément sera entièrement en niveaux de gris. Si vous transmettez une valeur supérieure à 100%, elle sera plafonnée à 100%.

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

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 valeurs de pourcentage ou 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

Browser Support

• 18
• 12
• 35
• 6

Source

Le filtre opacity() fonctionne exactement 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

Browser Support

• 18
• 12
• 35
• 6

Source

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

Browser Support

• 18
• 12
• 35
• 6

Source

Ce filtre vous permet d'ajouter un effet sépia qui fonctionne comme grayscale(). Le sépia est une technique d'impression photographique qui convertit les tons noirs en tons bruns pour les réchauffer. Vous pouvez transmettre un nombre ou un pourcentage comme argument pour sepia(), ce qui augmente ou diminue l'effet. Si vous ne transmettez aucun argument, un effet sépia complet est appliqué (équivalent à sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

Dans la leçons sur les couleurs, vous avez appris comment 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, comme des degrés ou des tours, la teinte de toutes les couleurs de l'élément change, ce qui modifie la partie de la roue chromatique à laquelle il fait référence. Si vous ne transmettez aucun argument, rien ne se passe.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Vous pouvez appliquer une ombre portée qui épouse les courbes comme vous le feriez dans un outil de conception, comme 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 découpée. Le filtre drop-shadow utilise un paramètre d'ombre qui contient des valeurs de décalage X, de décalage Y, de flou et de couleur séparées par des espaces. Il 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);
}

Découvrez les différents types d'ombres dans le module ombres.

url

Browser Support

• 5
• 12
• 3
• 6

Source

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 d'arrière-plan

Browser Support

• 76
• 79
• 103
• 18

Source

La propriété backdrop-filter accepte toutes les valeurs de fonction de filtre que 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, tandis que la propriété filter les applique à l'ensemble de l'élément.

L'exemple au début de ce cours est parfait, car vous ne voulez pas que le texte soit flouté et, dans l'idéal, vous ne voulez pas avoir à ajouter d'éléments HTML supplémentaires. Vous pouvez ainsi appliquer des filtres uniquement au fond.

Vérifier vos connaissances

Tester vos connaissances sur les filtres

Parmi les propositions suivantes, lesquelles sont des fonctions de filtre CSS ?

grayscale()

🎉

invert()

🎉

flip()

Essayez encore.

multiply()

Essayez encore.

blur()

🎉

brightness()

🎉

Le CSS peut-il utiliser des filtres SVG ?

Oui

La fonction de filtre url() permet cela.

Non

Essayez encore.