Filtre

La propriété filter permet de réaliser des effets de filtre.

1
img {
2
  filter: blur(5px) brightness(0.5);
3
}

Ajoute du flou et baisse la luminosité.

ComplémentÉditeur Filter

blur
brightness
contrast
drop-shadow :

x

y

flou

couleur
grayscale
hue-rotate
invert
opacity
saturate
sepia

Filter

Définitionblur()

Ajoute du flou

Définitionbrightness()

Modifie la luminosité (0 noir, 1 original)

Définitioncontrast()

Modifie le contraste (0 gris, 1 original)

Définitiondrop-shadow()

Ajoute une ombre : drop-shadow(decalageX decalageY flou couleur)

1
filter:  drop-shadow(16px 16px 10px black);

Définitiongrayscale()

Niveau de gris (0 original, 1 total)

1
filter:  grayscale(1);

Définitionhue-rotate()

Rotation sur le cercle des couleurs (valeur h du modèle hsl)

1
filter: hue-rotate(50deg);

Définitioninvert()

Inverse les couleurs (0 original, 1 négatif)

1
filter: invert(1);

Définitionopacity()

Règle l'opacité (0 transparente, 1 original)

1
filter: opacity(0.5);

Définitionsaturate()

Sature

1
filter: saturate(0.5);

Définitionsepia()

Conversion en sépia (0 original, 1 complet)

1
filter: sepia(1);

ComplémentCombinaisons

On peut combiner les filtres

1
filter: contrast(0.5) brightness(0.5)

Complément

yoshi