Kaip taikyti Instagram filtrus interneto vaizduose

Daugelis mėgsta naudoti Instagram ir filtrus, kurie ateina su programa, kad jų nuotraukos būtų įdomesnės ir gražesnės. Iki šiol šių filtrų naudojimas yra apribotas naudoti tik programoje. Ką daryti, jei norite naudokite Instagram filtrus žiniatinklio vaizduose, už programos ribų, pavyzdžiui, nuotraukas, kurias norite įdėti į savo asmeninį tinklaraštį ar svetainę?

Na, galite naudoti CSSGram, mažą biblioteką, kuri leidžia jums redaguokite nuotraukas su filtrais, kurie yra panašūs į tai, ką galite rasti „Instagram“ programoje. Skirtingai nuo „Photoshop“, kur redagavimas yra rankinis arba atliekamas naudojant „Photoshop“ veiksmus, su „CSSGram“, visas procesas atliekamas per CSS.

Kaip tai veikia

Kad generuotų efektą, CSSGram naudoja CSS filtrai ir CSS mišinio režimas, iš esmės derinant efektus iki taško, kuriame jis imituoja norimą Instagram filtrą. Poveikis taikomas vaizdo konteineriui, naudojant pseudo elementus. Pažiūrėkime, kaip tai daroma naudojant šį „1977“ pavyzdį:

Štai pridėtas pseudo elementas.

 ._1977 pozicija: santykinis;  ._1977: po turinys: ", ekranas: blokas, aukštis: 100%, plotis: 100%, viršus: 0, kairė: 0, pozicija: absoliutus; 

Ir tai yra CSS filtras ir Blend pridėta:

 ._1977 -webkit filtras: kontrastas (1,1) ryškumas (1.1) prisotintas (1.3); filtras: kontrasto (1,1) ryškumas (1.1) prisotintas (1.3);  ._1977: po fonas: rgba (243, 106, 188, 0.3); mix-mix-mode: ekranas;  

Kaip naudoti

Mes negalime pridėti filtro klasės tiesiai į vaizdo elementą, jis turi būti pridedamas prie konteinerio ar tėvų klasės, pvz., Su

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;