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
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
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.
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!