Si vous cherchez un moyen d'intégrer des filtres graphiques semblables à ceux d'Instagram dans votre nouveau projet, pas la peine de réinventer la roue.

Grâce à la bibliothèque CSSgram, vous allez pouvoir appliquer directement des filtres sur vos images, directement en CSS.

Pour l'utiliser, téléchargez CSSgram, puis linkez la feuille de style dans votre projet :

<link rel="stylesheet" href="css/vendor/cssgram.min.css">

Et ajouter la classe de votre choix à l'élément figure qui contient votre image. Comme ceci :

<figure class="aden">
<img src="./media/abd26bdf.img.png" data-original-source="http://feedproxy.google.com/~r/KorbensBlog-UpgradeYourMind/~3/zHVqj7x8ma4/../img.png">
</figure>

Voici les filtres disponibles qui correspondent à ceux d'Instagram :

1977: class="_1977"
Aden: class="aden"
Brooklyn: class="brooklyn"
Clarendon: class="clarendon"
Earlybird: class="earlybird"
Gingham: class="gingham"
Hudson: class="hudson"
Inkwell: class="inkwell"
Lark: class="lark"
Lo-Fi: class="lofi"
Mayfair: class="mayfair"
Moon: class="moon"
Nashville: class="nashville"
Perpetua: class="perpetua"
Reyes: class="reyes"
Rise: class="rise"
Slumber: class="slumber"
Toaster: class="toaster"
Walden: class="walden"
Willow: class="willow"
X-pro II: class="xpro2"

Si vous utilisez Sass, vous pouvez aussi étendre vos styles avec ceux de CSSgram.

Sympa non ?