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

Suggerimento per la scrittura: come trovare l'argomento giusto

Non ci vuole un super-investigatore per capire che la scrittura non è così difficile come è crollata. Pensare a cosa scrivere, però, è una storia completamente diversa. Due fattori entrano in gioco quando si sceglie il tipo di scrittura che si farà su base regolare: cosa si può fare e cosa si vuole realizzare?Sei br

(Consigli tecnici e di design)

50 temi di Tumblr belli raccolti a mano

Tumblr è una delle più interessanti piattaforme di social media e ospita persone creative che amano condividere i propri pensieri e idee con persone di stesso interesse. Tuttavia, per attirare più visitatori sul tuo blog, hai bisogno di un tema Tumblr attraente che puoi personalizzare - e questo è ciò di cui tratta questo post.In q

(Consigli tecnici e di design)