Kuidas rakendada Instagrami filtreid veebipiltidel

Paljud armastavad kasutada Instagrami ja rakendusega kaasas olevaid filtreid, et muuta oma fotod huvitavamaks ja ilusamaks. Seni on nende filtrite kasutamine piiratud rakenduse sees. Mis siis, kui soovite kasutage Instagrami filtreid veebipiltidel, väljaspool rakendust, näiteks fotod, mida soovite oma isiklikus blogis või veebilehel panna?

Noh, saate kasutada CSSGrami, väikest raamatukogu, mis võimaldab teil redigeerige oma fotosid filtritega, mis on sarnased Instagram-rakenduses leiduvatele filtritele. Erinevalt Photoshopist, kus redigeerimised on käsitsi tehtud või tehtud Photoshopi toimingute kaudu, toimub CSSGramiga kogu protsess CSS-i kaudu.

Kuidas see töötab

Efekti loomiseks kasutab CSSGram CSS-filtrid ja CSS-segu režiim, põhimõtteliselt segades efektid punkti, kus see imiteerib teie soovitud Instagram-filtrit. Efektid rakendatakse kujutise konteinerile pseudoelementide kaudu. Vaatame, kuidas seda "1977.

Siin on lisatud pseudoelement.

 ._1977 positsioon: sugulane;  ._1977: pärast sisu: "; kuva: plokk; kõrgus: 100%; laius: 100%; ülemine: 0; vasakul: 0; positsioon: absoluutne; 

Ja see on CSS-filter ja Blend lisatud:

 ._1977 -webkit-filter: kontrasti (1,1) heledus (1.1) küllastunud (1.3); filter: kontrasti (1,1) heledus (1.1) küllastunud (1.3);  ._1977: pärast taust: rgba (243, 106, 188, 0.3); mix-blend-mode: ekraan;  

Kuidas kasutada

Me ei saa lisada filtri klassi otse pildielemendile, see tuleb lisada näiteks konteinerisse või vanemaklassi

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;