Filtres

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

  • Chrome: 53 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 9.1. <ph type="x-smartling-placeholder">

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, 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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

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

Navigateurs pris en charge

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 18 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 35 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 5. <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

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

  • Chrome: 76 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 103 <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Source

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 ?

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
Non
Essayez encore.