Les filtres CSS3

09.12.2013

La propriété filter en CSS3 permet de modifier de façon assez sympathique les couleurs d'un élément. Survoler les images pour voir l'effet

Les filtres CSS3

sélecteur{
-webkit-filter: blur(Xpx);
-moz-filter: blur(Xpx);
-o-filter: blur(Xpx);
filter: blur(Xpx);
}

Blur permet de flouter un élément. Remplacez X par une valeur en px, indiquant l'étendu du flou. 0px laisse l'élément normal.

Les filtres CSS3

Grayscale permet de passer un élément de couleur en nuance de gris, 0 n'a aucun effet, et 1 passe l'élément en noir et blanc. Vous pouvez utiliser les décimaux de 0 à 1 (0.3 ; 0.4 ; etc...)

sélecteur{
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
filter: grayscale(1);
}

Les filtres CSS3

Le même fonctionnement que grayscale, en mettant l'élément en sepia. Utilisez les valeurs de 0 à 1.

sélecteur{
-webkit-filter: sepia(1);
-moz-filter: sepia(1);
-o-filter: sepia(1);
filter: sepia(1);
}

Les filtres CSS3

Brightness vous permet d'augmenter la luminosité d'un élément.
0 represente le noir
1 l'élément normal
Vous pouvez ensuite aller jusqu'à 10 pour augmenter la luminosité

sélecteur{
-webkit-filter: contrast(5);
-moz-filter: contrast(5);
-o-filter: contrast(5);
filter: contrast(5);
}

Les filtres CSS3

Même fonctionnement que brightness, Contrast permet d'augmenter le contraste entre les couleur.
0 n'a aucun contraste, ce qui affiche un élément gris
1 ne modifie rien
Vous pouvez ensuite aller jusqu'à 10 pour augmenter le contraste.

sélecteur{
-webkit-filter: brightness(5);
-moz-filter: brightness(5);
-o-filter: brightness(5);
filter: brightness(5);
}

Les filtres CSS3

Hue-Rotate fait "tourner" la teinte des couleurs. En tournant de 180° vous inversez les teintes.
Je parle bien de teinte et non de couleur. Cette propriété n'a aucun effet sur les éléments en nuance de gris.

sélecteur{
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}

Les filtres CSS3

Invert inverse les couleurs d'un élément.
0 ne modifie rien
0.5 rend l'élément d'un gris uni
1 inverse totalement les couleurs

sélecteur{
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}

Les filtres CSS3

Saturate permet de modifer la saturation des couleurs.
0 met l'élément en nuance de gris
1 ne modifie rien
10 sature au maximum

sélecteur{
-webkit-filter: saturate(10);
-moz-filter: saturate(10);
-o-filter: saturate(10);
filter: saturate(10);
}

Vous pouvez bien sûr utiliser plusieurs filtres sur le même élément. N'hésitez pas à bidouiller un peu les valeurs pour trouver ce que vous voulez.