CSSgram, una semplice e piccola (<1kb gzipped) libreria CSS per ricreare gli effetti di Instagram sulle nostre immagini senza fare editing con programmi come Photoshop o GIMP.
Oggi vi mostro una risorsa che farà contenti non pochi blogger. Prima di tutto vediamo la compatibilità. Questa libreria usa i CSS Filter e CSS Blend Modes, che sono supportate dai seguenti browser:
- Google Chrome: 43+
- Mozilla Firefox: 38+
- Internet Explorer: NO ( stupiti? 🙂 )
- Opera: 32+
- Safari: 8+
- Edge: ok
Vediamo ora come usarla
- Scarichiamo la libreria CSSgram – Sito ufficiale
- Inseriamo la libreria CSSgram all’interno dell’head nel nostro progetto:
<link rel="stylesheet" href="css/vendor/cssgram.min.css"> - Aggiungiamo la classe del filtro che vogliamo usare. Ecco un esempio:
<figure class="aden">
<img src="img.png" alt="" />
</figure>
Ecco tutte le classi disponibili
- Aden:
class="aden" - Reyes:
class="reyes" - Perpetua:
class="perpetua" - Inkwell:
class="inkwell" - Toaster:
class="toaster" - Walden:
class="walden" - Hudson:
class="hudson" - Gingham:
class="gingham" - Mayfair:
class="mayfair" - Lo-fi:
class="lofi" - X-Pro II:
class="xpro2" - 1977:
class="_1977" - Brooklyn:
class="brooklyn"
