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

Fordeler med penn og papir før du designer på datamaskinen

Fortell meg, når var siste gang du faktisk skrev med penn og papir? Det er ikke overraskende å vite at du sjelden bruker dem, da vi går inn i den digitale tidsalderen når teknologier som laptop og nettbrett blomstrer over hele verden. Men det avgjørende faktum her er at bruk av penn og papir er definitivt mer effektivt enn å bruke datamaskin når det kommer til å skisse, skrive, designe, hvilken som helst aktivitet som involverer brainstorming !Det er

(Tekniske og design tips)

10 Viber Funksjoner du trenger å vite [Android]

Som en meldingsapp har Viber utviklet seg ganske mye siden den ble lansert i 2010. Viber har ikke bare de vanlige funksjonene til andre meldingsapps, det tar det enda lenger med klistremerker og uttrykksikoner som muliggjør mer tilpasning . For tiden er det over 200 millioner Viber-brukere lokalisert i over 193 land.

(Tekniske og design tips)