it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


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

WWDC 2017 - Tutto ciò che devi sapere

WWDC 2017 - Tutto ciò che devi sapere

Come previsto da Apple, il keynote del WWDC del 2017 ha introdotto il mondo a una nuova serie di contenuti interessanti dell'azienda, che vanno dall'hardware come il nuovo iMac a software come iOS 11 .Visto che c'è un certo numero di cose da passare, sarò questo articolo guardando le offerte hardware di Apple, prima di passare al lato software delle cose.

(Consigli tecnici e di design)

45 bellissimi font che puoi scaricare gratuitamente

45 bellissimi font che puoi scaricare gratuitamente

È il momento di rispolverare il tuo tesoro dimenticato da tempo pieno di caratteri e portarne di nuovi prima della fine dell'anno.In questa raccolta, ho raccolto 45 font gratuiti dal 2015 che puoi aggiungere al tuo arsenale di bellissimi caratteri da utilizzare nei tuoi progetti 2016. E, naturalmente, come un buon essere umano, non dimenticare di ringraziare i designer che hanno realizzato e pubblicato questi font gratuitamente!

(Consigli tecnici e di design)