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 bruke 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 redigere bildene dine med filtre som ligner på hva du finner i Instagram-appen . I motsetning til Photoshop der 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- blendmodus, 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: ''; skjerm: 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

som en beholder.

Koden vil se slik ut:

Ikke glem å inkludere CSSgram-biblioteket (hent det her) til HTML-dokumentet ditt.

Jeg opprettet bildedemoen før og etter å legge til filter og resultatet er veldig fint. Det finnes 13 filtre i biblioteket for øyeblikket. Nedenfor kan du se forskjellene mellom det opprinnelige bildet og bildet under filtene " 1977 ", " Aden " og " Gingham ".

Se pennen rOKPmW

Hvis du bare er interessert i å bruke noen av stilene, kan du laste de enkelte CSS-filene tilsvarende.

Bruke SCSS

Hvis du vil legge til filtre i din nåværende bildebeholderklasse uten navneendring, kan du gjøre det ved å utvide filtereffekten i dine SCSS-filer. Slik gjør du det.

Først last ned SCSS kildefilen og importer din SCSS-fil.

 @import 'leverandør / cssgram'; 

Anta at du har HTML-strukturen som følger:

Deretter i din style.scss, utvider du filteret slik:

 .my-class {... @extend% _1977; } 

Flere Instagram Innlegg

• 40 Verktøy og apper for å overbelaste Instagram-kontoen din
• 20 Nyttige Apps for å få mest mulig ut av Instagram
• 10 nyttige instagram tips og triks du bør vite

10 produktivitetsverktøy for å gjøre mer med slakk

Siden lanseringen i 2013 har Slack vokst til å bli et topp team kommunikasjonsverktøy. Dens tilgjengelighet på flere store plattformer gjør det til et flott verktøy for å generere samtaler, samarbeid og diskusjoner. Det tillater også integrasjon og tjenester fra tredjeparter for å gjøre livet enklere.For ekse

(Tekniske og design tips)

10 beryktede hackere som gjorde overskrifter

Når folk hører ordet "hacker", tenker de vanligvis på de som anses som svarthatt hackere. I motsetning til hvite hat hackere, hvem hacke datasystemer for å hjelpe patch feil i sikkerheten hackere hackere hack for mer ulovlige gevinster . Uansett om det er for penger, personlig informasjon eller bare for spenningen av det, utfordrer svarthattbrukerne ødeleggelse på datasystemer og lar vanligvis en spor av ofre bak.I det

(Tekniske og design tips)