Come applicare filtri Instagram su immagini Web

Molti amano usare Instagram e i filtri forniti 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. Che cosa succede se si desidera utilizzare i filtri di Instagram sulle immagini Web, al di fuori dell'app, come le foto che si desidera inserire nel proprio blog o sito Web personale?

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

Come funziona

Per generare l'effetto, CSSGram utilizza i filtri CSS e la modalità di fusione CSS, fondendo fondamentalmente 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: ''; blocco di visualizzazione; altezza: 100%; larghezza: 100%; inizio: 0; a sinistra: 0; posizione: assoluta; } 

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

come un contenitore.

Il codice sarà simile a questo:

Non dimenticare di includere la libreria CSSgram (scarica qui) nel tuo documento HTML.

Ho creato la demo delle immagini prima e dopo l'aggiunta del filtro e il risultato è molto bello. Al momento ci sono 13 filtri inclusi nella libreria. Qui sotto puoi vedere le differenze tra l'immagine originale e l'immagine sotto i filtri " 1977 ", " Aden " e " Gingham ".

Vedi la penna rOKPmW

Se sei solo interessato a utilizzare uno qualsiasi degli stili, puoi caricare i singoli file CSS di conseguenza.

Utilizzo di SCSS

Se si desidera aggiungere i filtri alla classe del contenitore di immagini corrente senza una modifica del nome, è possibile farlo estendendo l'effetto del filtro all'interno dei file SCSS. Ecco come farlo.

Scaricare innanzitutto il file sorgente SCSS e importare il file SCSS.

 @import 'vendor / cssgram'; 

Supponiamo di avere la struttura HTML come di seguito:

Quindi nel tuo style.scss, estendi il filtro in questo modo:

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

Altri post di Instagram

• 40 strumenti e app per potenziare il tuo account Instagram
• 20 app utili per sfruttare al massimo Instagram
• 10 utili consigli e trucchi su Instagram che dovresti sapere

Email marketing: consigli per farlo bene

Oggigiorno, con la diffusione di Internet in tutto il mondo, sempre più persone passano dai supporti fisici alla promozione aziendale fino al marketing online. L'email marketing è uno dei migliori mezzi per promuovere i tuoi prodotti e servizi online. È anche una delle più antiche fonti di marketing business-to-business utilizzato praticamente da tutti.Una

(Consigli tecnici e di design)

Come diventare un leader del design thinking

Cosa serve per diventare un leader di pensiero nella comunità del design? Per leader di pensiero intendo qualcuno che può fare una dichiarazione sul design o sui designer, e deve essere ascoltato, bloggato, ritwittato e discusso da migliaia di designer professionisti e altri in settori correlati.Esploreremo alcuni dei tratti comuni di questi tipi di individui e analizzeremo alcuni modi in cui anche voi potrete eventualmente arrivarci.S

(Consigli tecnici e di design)