no.hideout-lastation.com
Paradis For Designere Og Utviklere


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

3 Nye MINDRE CSS-funksjoner du bør vite

3 Nye MINDRE CSS-funksjoner du bør vite

Det har vært en stund siden vår siste diskusjon om MINDRE CSS. I dag har LESS CSS nådd versjon 1.5, og den har utviklet seg med nye funksjoner som gjør den sterkere som en CSS-prosessor.Det har vært en rekke nye tillegg i den, og i dette innlegget kommer vi til å gå gjennom 3 av mine nye favorittfunksjoner, Referanse Ekstern fil, Utvid, Fusjonering av eiendom, som kan hjelpe oss med å skrive bedre CSS. La oss

(Tekniske og design tips)

Vakre Ramadan Bakgrunnsbilder til skrivebordet ditt

Vakre Ramadan Bakgrunnsbilder til skrivebordet ditt

Ramadan er en måned med velsignelser og bønner. I denne måneden er muslimer fra hele verden rask på dagtid. All slags mat og drikke er forbudt fra soloppgang til skumringen, eller om dagen. Det er en måned med godhet som ender med en av de største festivaler i muslimsk kalender, Eid-Ul-Fitr. Dagen starter med et måltid som må spises før daggry. Etter d

(Tekniske og design tips)