Filtres CSS

Comment travailler avec le CSSfilterbiens

Les filtres nous permettent d'effectuer des opérations sur des éléments.

Ce que vous faites normalement avec Photoshop ou un autre logiciel de retouche photo, comme changer l'opacité ou la luminosité, etc.

Vous utilisez lefilterbiens. Voici un exemple d'application sur une image, mais cette propriété peut être utilisée surtoutélément:

img {
  filter: <something>;
}

Vous pouvez utiliser différentes valeurs ici:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()
  • url()

Notez les parenthèses après chaque option, car elles nécessitent toutes un paramètre.

Par exemple:

img {
  filter: opacity(0.5);
}

signifie que l'image sera transparente à 50%, caropacity()prend une valeur de 0 à 1, ou un pourcentage.

Vous pouvez également appliquer plusieurs filtres à la fois:

img {
  filter: opacity(0.5) blur(2px);
}

Parlons maintenant de chaque filtre en détail.

blur()

Brouille le contenu d'un élément. Vous lui passez une valeur, exprimée enpxouemouremqui sera utilisé pour déterminer le rayon de flou.

Exemple:

img {
  filter: blur(4px);
}

opacity()

opacity()prend une valeur de 0 à 1, ou un pourcentage, et détermine la transparence de l'image en fonction de celle-ci.

0, ou0%, signifie totalement transparent.1, ou100%, ou plus, signifie totalement visible.

Exemple:

img {
  filter: opacity(0.5);
}

CSS a également unopacitybiens.filtercependant, il peut être accéléré par le matériel, en fonction de l'implémentation, ce devrait donc être la méthode préférée.

drop-shadow()

drop-shadow()affiche une ombre derrière l'élément, qui suit le canal alpha. Cela signifie que si vous avez une image transparente, vous obtenez une ombre appliquée à la forme de l'image, pas à la zone d'image. Si l'image n'a pas de canal alpha, l'ombre sera appliquée à l'ensemble de la zone d'image.

Il accepte au minimum 2 paramètres, jusqu'à 5:

  • offset-xdéfinit le décalage horizontal. Peut être négatif.
  • offset-ydéfinit le décalage vertical. Peut être négatif.
  • rayon de flou, facultatif, définit le rayon de flou de l'ombre. La valeur par défaut est 0, pas de flou.
  • rayon de propagation, facultatif, définit le rayon d'épandage. Exprimée enpx,remouem
  • Couleur, facultatif, définit la couleur de l'ombre.

Vous pouvez définir la couleur sans définir le rayon de diffusion ou le rayon de flou. CSS comprend que la valeur est une couleur et non une valeur de longueur.

Exemple:

img {
  filter: drop-shadow(10px 10px 5px orange);
}
img {
  filter: drop-shadow(10px 10px orange);
}
img {
  filter: drop-shadow(10px 10px 5px 5px #333);
}

grayscale()

Donnez à l'élément une couleur grise.

Vous passez une valeur de 0 à 1, ou de 0% à 100%, où 1 et 100% signifient complètement gris, et 0 ou 0% signifient que l'image n'est pas touchée et que les couleurs d'origine restent.

Exemple:

img {
  filter: grayscale(50%);
}

sepia()

Donnez à l'élément une couleur sépia.

Vous passez une valeur de 0 à 1, ou de 0% à 100%, où 1 et 100% signifient complètement sépia, et 0 ou 0% signifient que l'image n'est pas touchée et que les couleurs d'origine restent.

Exemple:

img {
  filter: sepia(50%);
}

invert()

Inversez les couleurs d'un élément. Inverser une couleur signifie rechercher l'opposé d'une couleur dans la roue chromatique TSL. Recherchez simplement «roue chromatique» dans Google si vous n'avez aucune idée de ce que cela signifie. Par exemple, l'opposé du jaune est le bleu, l'opposé du rouge est le cyan. Chaque couleur a un contraire.

Vous passez un nombre, de 0 à 1 ou de 0% à 100%, qui détermine la quantité d'inversion. 1 ou 100% signifie une inversion complète, 0 ou 0% signifie aucune inversion.

0,5 ou 50% rendra toujours une couleur grise à 50%, car vous vous retrouvez toujours au milieu de la roue.

Exemple:

img {
  filter: invert(50%);
}

hue-rotate()

La roue chromatique TSL est représentée en degrés. Utilisanthue-rotate()vous pouvez faire pivoter la couleur en utilisant une rotation positive ou négative.

La fonction accepte undegévaluer.

Exemple:

img {
  filter: hue-rotate(90deg);
}

brightness()

Modifie la luminosité d'un élément.

0 ou 0% donne un élément noir total. 1 ou 100% donne une image inchangée

Les valeurs supérieures à 1 ou 100% rendent l'image plus lumineuse jusqu'à atteindre un élément blanc total.

Exemple:

img {
  filter: brightness(50%);
}

contrast()

Modifie le contraste d'un élément.

0 ou 0% donne un élément gris total. 1 ou 100% donne une image inchangée

Les valeurs supérieures à 1 ou 100% donnent plus de contraste.

Exemple:

img {
  filter: contrast(150%);
}

saturate()

Modifie la saturation d'un élément.

0 ou 0% donne un élément total en niveaux de gris (avec moins de saturation). 1 ou 100% donne une image inchangée

Les valeurs supérieures à 1 ou 100% donnent plus de saturation.

Exemple:

img {
  filter: saturate();
}

url()

Ce filtre permet d'appliquer un filtre défini dans un fichier SVG. Vous pointez vers l'emplacement du fichier SVG.

Exemple:

img {
  filter: url(filter.svg);
}

Les filtres SVG sortent du cadre de ce livre, mais vous pouvez en savoir plus sur cet article de Smashing Magazine:https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS:


Tech Wiki en ligne!