Come applicare filtri Instagram su immagini Web

Molti amano usare Instagram e i filtri che vengono con l'app, per rendere le loro foto più interessanti e belle. Finora però, l'uso di questi filtri è limitato all'utilizzo all'interno dell'app. Cosa succede se lo si desidera usa i filtri di Instagram sulle immagini web, al di fuori dell'app, come le foto che vuoi mettere nel tuo blog o sito web personale?

Bene, puoi usare CSSGram, una piccola libreria che ti permette di modifica le tue foto con filtri simili a quelli che puoi trovare nell'app Instagram. A differenza di Photoshop, in cui le modifiche sono manuali o eseguite tramite le azioni di Photoshop, con CSSGram, l'intero processo viene eseguito tramite CSS.

Come funziona

Per generare l'effetto, CSSGram utilizza Filtri CSS e Modalità di fusione CSS, fondamentalmente mescolando gli effetti al punto in cui imita il filtro Instagram desiderato. Gli effetti sono applicati al contenitore dell'immagine, tramite pseudo-elementi. Vediamo come questo viene fatto con questo esempio del 1977:

Ecco lo pseudo-elemento aggiunto.

 ._1977 posizione: relativa;  ._1977: dopo content: "; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; 

E questo è il filtro CSS e Blend ha aggiunto:

 ._1977 -webkit-filter: contrasto (1,1) luminosità (1,1) saturo (1,3); filtro: contrasto (1.1) luminosità (1.1) saturo (1.3);  ._1977: dopo background: rgba (243, 106, 188, 0,3); mix-blend-mode: schermo;  

Come usare

Non possiamo aggiungere la classe filtro direttamente all'elemento immagine, deve essere aggiunta al contenitore o alla classe genitore, ad esempio con

 @import 'vendor / cssgram'; 

 .my-class ... @extend% _1977;