Guillaume Duverger - Développement & Graphisme - Blog

Dernière mise à jour de l'article : mars 2021

Les filtres CSS c'est quoi ?

Les filtres CSS permettent d'appliquer des effets sur des images directement dans votre document HTML. Plus besoin de passer par un éditeur graphique.

Selon la spécification , il existe trois types de filtres :

• -Les filtres raccourcis (voir la liste plus bas)
• -Les filtres SVG
• -Les shaders : il existe deux types de shader. Les "vertex shaders" (.vs), permettant le déplacement et la déformation des sommets d'un polygone. Les "fragment shaders"(.fs), qui permettent de modifier le rendu des pixels d'un objet.

Liste des filtres :

Pour ce faire, on utilisera la propriété CSS filter. Il existe dix filtres natifs, listés ci-dessous :

Actuellement, Chrome supporte parfaitement les filtres CSS, de même que le navigateur Opera depuis la version 26 ainsi que Firefox, depuis la version 35. Vous pouvez vérifier la compatibilité sur Can I Use .

• Effet grayscale
• Effet blur
• Effet sépia
• Effet hue-rotate
• Effet drop-shadow
• Effet invert
• Effet brightness
• Effet opacity
• Effet contrast
• Effet saturate

Syntaxe des filtres CSS :

La syntaxe est assez simple, comme vous pouvez le voir :

/*effet grayscale*/

.effet-grayscale{

-webkit-filter: grayscale(100%)/*préfixe jusqu'à la version 49*/;
filter: url(grayscale.svg#grayscale) /*filtre svg pour Firefox version inferieure a 35*/;
filter: grayscale(100%) /*syntaxe finale*/

}

/*effet flou*/

.effet-flou{

-webkit-filter: blur(2px)/*préfixe jusqu'à la version 49*/;
filter: url(flou.svg#blur)/*filtre svg pour Firefox version inferieure a 35*/;
filter: blur(2px) /*syntaxe finale*/

}

/*effet sepia*/

.effet-sepia{

-webkit-filter: sepia(1)/*préfixe jusqu'à la version 49*/;
filter: url(sepia.svg#sepia);/*filtre svg pour Firefox version inferieure a 35*/
filter: sepia(1) /*syntaxe finale*/

}

/*effet hue-rotate*/

.effet-hue-rotate{

-webkit-filter: hue-rotate(90deg)/*préfixe jusqu'à la version 49*/;
filter: url(hue-rotate.svg#hue-rotate)/*filtre svg pour Firefox version inferieure a 35*/;
filter: hue-rotate(90deg) /*syntaxe finale*/

}

/*effet ombre portee*/

.effet-drop-shadow{

-webkit-filter: drop-shadow(12px 12px 7px hsla(0,0%,0%,.5))/*préfixe jusqu'à la version 49*/;
filter: url(ombre.svg#ombre)/*filtre svg pour Firefox version inferieure a 35*/;
filter: drop-shadow(10px 10px 5px rgba(0,0,0,.8)) /*syntaxe finale*/

}

/*effet invert*/

.effet-invert{

-webkit-filter: invert(1)/*préfixe jusqu'à la version 49*/;
filter: url(invert.svg#invert)/*filtre svg pour Firefox version inferieure a 35*/;
filter: invert(1) /*syntaxe finale*/

}

/*effet brightness*/

.effet-brightness{

-webkit-filter: brightness(.5)/*préfixe jusqu'à la version 49*/;
filter: url(brightness.svg#brightness)/*filtre svg pour Firefox version inferieure a 35*/;
filter: brightness(.5) /*syntaxe finale*/

}

/*effet opacity*/

.effet-opacity{

-webkit-filter: opacity(.5)/*préfixe jusqu'à la version 49*/;
filter: url(opacity.svg#opacity)/*filtre svg pour Firefox version inferieure a 35*/;
filter: opacity(50%) /*syntaxe finale*/

}

/*effet contrast*/

.effet-contrast{

-webkit-filter: contrast(200%)/*préfixe jusqu'à la version 49*/;
filter: url(contrast.svg#contrast)/*filtre svg pour Firefox version inferieure a 35*/;
filter: contrast(200%) /*syntaxe finale*/

}

/*effet saturate*/

.effet-saturate{
-webkit-filter:saturate(.3)/*préfixe jusqu'à la version 49*/;
filter:url(saturate.svg#saturate)/*filtre svg pour Firefox version inferieure a 35*/;
filter:saturate(.3) /*syntaxe finale*/

}

Mise en pratique

Sachez que l'on peut combiner plusieurs valeurs à un filtre, comme dans l'exemple ci-dessous (sepia et blur) :

img{

filter: sepia(1) blur(2px)

}

Une fonction parmi celles évoquées est autrement intéressante. Il s'agit de drop-shadow. Elle équivaut à la propriété CSS box-shadow, mais contrairement à cette dernière qui applique une ombre rectangulaire sur un élément, le filtre drop-shadow s’adapte aux contours des formes.

Exemple drop-shadow :

img{filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.56))}

A titre de comparaison, on applique un box-shadow en CSS à la même image :

Animations et filtres CSS

• Animation filtre CSS
• Animation filtre CSS

/*animations*/

.effet-anim{

animation: filter-animation 2s infinite;
-webkit-animation: filter-animation 2s infinite

}

.effet-anim1{

animation: filter-animation1 5s infinite;
-webkit-animation: filter-animation1 5s infinite

}

@keyframes filter-animation{

0%{

filter: sepia(0);
-webkit-filter:sepia(0)

}

50%{

filter: sepia(1);
-webkit-filter: sepia(1)

}

100%{

filter: sepia(0);
-webkit-filter: sepia(0)

}

}

@keyframes filter-animation1{

0%{

filter: sepia(0) saturate(2);
-webkit-filter: sepia(0) saturate(2)

}

50%{

filter: sepia(1) saturate(8);
-webkit-filter: sepia(1) saturate(8)

}

100%{

filter: sepia(0) saturate(2);
-webkit-filter: sepia(0) saturate(2)

}

}

backdrop-filter

Encore en l'état de brouillon dans le deuxième niveau du module des effets de filtre, la propriété backdrop-filter permet d'appliquer des filtres CSS sur des arrières-plan.

.cadre_back{

background: url(image);
height: 279px;
width: 420px;
display: flex;
margin: 2rem auto;

}

.interieur_cadre {

width: 100%;
height: 100%;
display: flex;
align-items: center;
background: linear-gradient(to left,hsla(152,100%,50%,.4) 0, hsla(250,100%,69%,.4));
-webkit-backdrop-filter: blur(1px); /*safari ios safari*/
backdrop-filter: blur(1px); /*chrome opera*/

} 

NB : l’arrière-plan sur lequel on applique la propriété backdrop-filter doit impérativement être semi-transparent. Pas de support prévu pour Firefox mais en considération pour Edge.