Slik bruker du Instagram-filtre på webbilder

Mange elsker å bruke Instagram og filtre som følger med appen, for å gjøre bildene mer interessante og vakre. Så langt er bruken av disse filtrene begrenset til bruk inne i appen. Hva om du vil bruk Instagram-filtre på webbilder, utenfor appen, som bilder du vil sette opp i din personlige blogg eller nettside?

Vel, du kan bruke CSSGram, et lite bibliotek som lar deg Rediger bildene dine med filtre som ligner på hva du finner i Instagram-appen. I motsetning til Photoshop hvor redigeringer er manuelle eller gjort via Photoshop-handlinger, med CSSGram, er hele prosessen gjort via CSS.

Hvordan det fungerer

For å generere effekten, bruker CSSGram CSS-filtre og CSS-blandingstilstand, i utgangspunktet blander effektene til et punkt der det etterligner ønsket Instagram-filter. Effektene blir brukt på bildebeholderen, via pseudo-elementer. La oss sjekke ut hvordan dette gjøres med dette "1977" -eksempelet:

Her er pseudo-elementet lagt til.

 ._1977 posisjon: relative;  .1977: etter innhold: "; display: blokk; høyde: 100%; bredde: 100%; topp: 0; venstre: 0; posisjon: absolutt; 

Og dette er CSS-filteret og blandingen lagt til:

 ._1977 -webkit-filter: kontrast (1.1) lysstyrke (1.1) mettet (1.3); filter: kontrast (1,1) lysstyrke (1,1) mettet (1,3);  .1977: etter bakgrunn: rgba (243, 106, 188, 0,3); mix-blend-modus: skjerm;  

Hvordan å bruke

Vi kan ikke legge filterklassen direkte til bildeelementet, det må legges til beholderen eller forelderklassen, for eksempel med

 @import 'leverandør / cssgram'; 

 .min klasse ... @extend% _1977;