Les filtres CSS


  1. Les filtres CSS c'est quoi ?
  2. Liste des filtres CSS
  3. Syntaxe des filtres CSS
  4. Mise en pratique
  5. Animations et filtres CSS
  6. Propriété backdrop-filter
  7. Aller plus loin

👉 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 :

  1. Les filtres raccourcis (voir la liste plus bas)
  2. Les filtres SVG
  3. 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🔗.

👉 Syntaxe des filtres CSS :

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



/*effet grayscale*/
.effet{-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%)}

/*effet flou*/
.effet1{-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)}

/*effet sepia*/
.effet2{-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)}

/*effet hue-rotate*/
.effet3{-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)}

/*effet ombre portee*/
.effet4{-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))}

/*effet invert*/
.effet5{-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)}

/*effet brightness*/
.effet6{-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)}

/*effet opacity*/
.effet7{-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%)}

/*effet contrast*/
.effet8{-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%)}

/*effet saturate*/
.effet9{-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)}


👉 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 :

Exemple box-shadow CSS

👉 Animations et filtres 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*/

} 

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

💡 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.

👉 Source, inspiration, ressources :

En complément, je vous invite à jeter un oeil sur cet article concernant les modes de fusion d'images en CSS.

Voir aussi sur ce blog les filtres SVG🔗(revoir lien)

Exemple filtres et transitions CSS🔗

Article sur les filtres CSS (FR)🔗

CSS Custom Filters : filtres avancés🔗

Une autre façon de recréer l'effet flou sur texte en CSS3🔗.

Article sur la propriété backdrop-filter🔗

Article (EN)🔗 sur CSS shaders

Exemple shape blobbing (FR)🔗 en CSS.

Article très intéressant sur les performances et les filtres CSS (EN)🔗.

Filtres Instagram (EN)🔗 en CSS