Vous connaissez tous Instagram, le réseau social dédié à la photo où, lors de l'ajout d'une photo, vous pouvez lui appliquer divers filtres pour "embélir" vos photos ?

Et bien aujourd'hui je vous propose de faire la même chose mais en CSS grâce aux CSS Filters et CSS Blend Modes via la librairie CSSgram.

La mise en place est très simple puis-ce que vous n'avez besoin que d'insérer un seul fichier CSS dans votre code et d'ajouter la classe que vous souhaitez. Si vous voulez connaître la liste de tous les effets disponibles, vous pouvez vous rendre sur le site de CSSgram.

Demo

Niveau compatibilité, c'est bon sauf (oui encore lui vous vous en doutez) Internet Explorer. Je vous laisse visualiser le résultat.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.10/cssgram.min.css">

<figure class="earlybird">
    <img src="https://www.jeremy-reynaud.fr/images/P1050652_5b94000c4995f.jpg" style="width: 100%; height: auto;">
</figure>

Source

Github : https://github.com/una/CSSgram