Corsi on-line

Filtri in stile Instagram con CSSgram

CSSgram è una libreria CSS per la realizzazione di filtri in stile Instagram senza l’utilizzo di JavaScript o altre soluzioni per lo scripting client side; utilizzare questo piccolo framework per l’editing delle immagini è estremamente semplice e eviterà di dover processare manualmente le componenti grafiche di un sito Web o di una Web application, con in più il vantaggio di conservare i file originali e poterli modificare al volo con nuovi filtri.

CatturaLa libreria sfrutta con la stessa efficacia sia i Blend Modes che i filtri offerti nativamente da CSS3, una caratteristica che garantisce il supporto da parte di tutti i browser più diffusi per la navigazione su Internet (tranne Internet Explorer ma con la compatibilità con Microsoft Edge) nelle versioni più recenti. Tecnicamente CSSgram fa uso di pseudo-elementi come per esempio ::before e ::after.

Gli pseudo-elementi consentiranno di generare effetti filtro applicabili direttamente agli elementi presenti tra i contenuti di una pagina Web, in sostanza questi ultimi non verranno sostituiti come avverrebbe nel caso in cui si facesse ricorso al tag img, ma modificati sulla base delle classi richiamate all’interno del markup HTML. Si consiglia quindi di delimitare le immagini da filtrare tramite il tag figure.

E’ possibile includere la libreria nei propri progetti tramite l’apposito CDN (Content Delivery Network) messo a disposizione dagli sviluppatori di CSSgram:

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

In alternativa si potrà scaricare localmente il file CSS necessario (in versione minificata) e richiamarla sempre tra i tag head:

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

Fatto questo il passaggio successivo sarà quello di applicare all’immagine una delle decine di classi disponibili (come nella figura proposta in precedenza), ognuna associata ad uno specifico filtro in stile Instagram:

<figure class="aden">
  <img src="../img.png">
</figure>

CSSgram supporta la sintassi SASS, l’estensione di CSS che permette di definire variabili e creare funzioni; in questo caso si dovrà fare riferimento a dei placeholder (ad esempio @extend %aden) o ai mixins (ad esempio @include aden()); questi ultimi risulteranno più flessibili perché consentono di aggiungere più filtri CSS3 come argomenti.

Via CSSgram

Post correlati
I più letti del mese
Tematiche