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

Strumento gratuito per l'analisi degli utenti di Open Source Reddit

La community di Reddit è assolutamente massiccia con così tanto da fare e tanti contenuti da sfogliare. Ma i subreddits non sono l'unica parte interessante di Reddit.È inoltre possibile scavare nella base utente che rende Reddit un sito veramente user-powered. Con Reddit User Analyzer, puoi cercare qualsiasi nome utente e ottenere risultati immediati sui loro pattern di commento, i loro migliori subreddit, le loro parole più usate e molto altro ancora.Ini

(Consigli tecnici e di design)

20 espressioni artistiche sbalorditive che creano consapevolezza pubblica

Quando la gente pensa all'arte, pensa a creazioni bizzarre e bellissimi dipinti intricati appesi nei musei. In sostanza, il processo di portare un'opera d'arte alla vita è creativo, ma l' arte stessa può anche servire a uno scopo . Può essere usato come un modo per sensibilizzare sui problemi che riguardano noi nella nostra vita quotidiana.In

(Consigli tecnici e di design)