Instagram-suodattimien käyttäminen Web-kuvissa

Monet rakastavat Instagramia ja sovelluksen mukana tulevia suodattimia, jotta heidän valokuvansa ovat mielenkiintoisia ja kauniita. Toistaiseksi näiden suodattimien käyttö on rajoitettu käytettäväksi sovelluksen sisällä. Mitä jos haluat käytä Instagram-suodattimia web-kuvissa, sovelluksen ulkopuolella, kuten valokuvia, jotka haluat asettaa omaan blogiin tai verkkosivustoon?

No, voit käyttää CSSGramia, joka on pieni kirjasto muokkaa valokuviasi suodattimilla, jotka ovat samanlaisia ​​kuin Instagram-sovelluksessa. Toisin kuin Photoshop, jossa muokkaukset ovat manuaalisia tai toteutetaan Photoshop-toimintojen avulla, CSSGramilla koko prosessi suoritetaan CSS: n kautta.

Kuinka se toimii

Tehosteen aikaansaamiseksi CSSGram käyttää CSS-suodattimet ja CSS-sekoitustila, periaatteessa sekoittamalla vaikutukset siihen pisteeseen, jossa se jäljittelee haluamaasi Instagram-suodatinta. Vaikutukset kohdistetaan kuvasäiliöön pseudoelementtien kautta. Katsotaanpa, miten tämä tehdään tämän "1977" esimerkin avulla:

Tässä on lisätty pseudoelementti.

 ._1977 sijainti: suhteellinen;  ._1977: jälkeen sisältö: ", näyttö: lohko, korkeus: 100%, leveys: 100%, alkuun: 0, vasen: 0, sijainti: absoluuttinen; 

Ja tämä on CSS-suodatin ja Blend lisätty:

 ._1977 -webkit-suodatin: kontrasti (1,1) kirkkaus (1.1) kyllästyy (1.3); suodatin: kontrasti (1,1) kirkkaus (1.1) tyydyttynyt (1.3);  ._1977: jälkeen tausta: rgba (243, 106, 188, 0,3); mix-blend-mode: näyttö;  

Kuinka käyttää

Emme voi lisätä suodatinluokkaa suoraan kuvaan, se on lisättävä esimerkiksi konttiin tai vanhempaan luokkaan

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;