Guillaume Duverger - Développement & Graphisme - Blog

Les filtres CSS
Vous êtes ici : Accueil Blog > Articles > CSS
Sommaire de l'article
  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

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 :

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

Effet sépia


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

Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page