Kako primijeniti Instagram filtre na web-slike

Mnogi vole koristiti Instagram i filtre koji dolaze s aplikacijom, kako bi njihove fotografije bile zanimljivije i ljepše. Do sada, međutim, upotreba ovih filtara ograničena je na upotrebu unutar aplikacije. Što ako želiš koristite Instagram filtre na web-slikama, izvan aplikacije, poput fotografija koje želite postaviti u svoj osobni blog ili web-lokaciju?

Pa, možete koristiti CSSGram, malu knjižnicu koja vam omogućuje uredite fotografije pomoću filtara koji su slični onima koje možete pronaći na Instagram aplikaciji. Za razliku od Photoshopa gdje su uređivanja ručna ili se obavljaju putem Photoshopa, s CSSGramom, cijeli se proces obavlja putem CSS-a.

Kako radi

Za generiranje učinka koristi CSSGram CSS filtri i CSS način miješanja, u osnovi miješanje efekata do točke gdje oponaša željeni Instagram filtar. Efekti se primjenjuju na spremnik slika, preko pseudo-elemenata. Pogledajmo kako se to radi s ovim primjerom "1977":

Evo dodanog pseudo-elementa.

 ._1977 position: relative;  ._1977: nakon content: "; display: block; height: 100%; širina: 100%; vrh: 0; lijevo: 0; pozicija: apsolutna; 

A ovo je CSS filter i Blend je dodao:

 ._1977 -webkit-filter: kontrast (1.1) svjetlina (1.1) zasićena (1.3); filtar: kontrast (1.1) svjetlina (1.1) zasićena (1.3);  ._1977: poslije pozadina: rgba (243, 106, 188, 0.3); mix-blend-mode: zaslon;  

Kako koristiti

Ne možemo dodati klasu filtra izravno elementu slike, ona se mora dodati u spremnik ili roditeljsku klasu, na primjer s

 @import "dobavljač / cssgram"; 

 .moja klasa … @extend% _1977;