CSSGram, des filtres Instagram en CSS

Elliott Chiaradia | 07-02-2016

CSSGram permet d’ajouter des filtres, à la Instagram, à vos photos en CSS. Si vous ne savez pas utiliser de logiciels d’édition de photos et que vous voulez garder une certaine cohérence graphique entre les images postées sur votre site web, cette fonctionnalité peut être intéressante. 22 filtres sont disponibles, vous pouvez les visionner/tester ici : http://una.im/CSSgram/

Passons à la pratique, la première chose à faire est d’appeler une feuille de styles CSS contenant les différentes classes des filtres, puis vous pouvez rajouter une classe directement dans la balise <img/>, rien de bien compliqué !

Le fichier cssgram.min.css se télécharge ici. Après l’avoir obtenu et l’avoir déplacé dans votre répertoire contenant les feuilles de styles, il vous suffit d’y ajouter un appel d’un fichier CSS des plus standards. Ensuite, comme évoqué précédemment, vous pouvez ajouter des classes à vos images. La liste complète des noms de classes des filtres est disponible à cette adresse.

<!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
        <link rel="stylesheet" href="cssgram.min.css">
    </head>
    <body>
        <img class="_1977" src='photo.png' style='width:200px'></div>
        <img class="inkwell" src='photo.png' style='width:200px'></div>
        <img class="slumber" src='photo.png' style='width:200px'></div>
    </body>
</html>

 

A la place de télécharger le fichier cssgram.min.css, vous pouvez aussi utiliser le CDN :

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">

 

Bien que le fichier cssgram.min.css ne pèse pas grand-chose, vous pouvez choisir de ne pas charger la totalité des filtres mais seulement ceux qui vous intéressent. Pour ce faire, rendez-vous sur la page suivante et téléchargez les filtres CSS souhaités. Puis ajoutez les appels à ces fichiers CSS dans votre <head>.

<!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
        <link rel="stylesheet" href="slumber.min.css">
    </head>
    <body>
        <img class="slumber" src='photo.png' style='width:200px'></div>
    </body>
</html>

 

Au niveau de la compatibilité, il faut savoir que malheureusement CSSGram ne fonctionne pas avec IE :

  • Google Chrome: 43+
  • Mozilla Firefox: 38+
  • Internet Explorer: Nope
  • Opera: 32+
  • Safari: 8+

 

Sources :

Site officiel : http://una.im/CSSgram/

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

CDN : https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css