Hogyan kell alkalmazni az Instagram szűrőket a webes képeken

Sokan szeretik az Instagramot és az alkalmazást tartalmazó szűrőket, hogy fényképeiket érdekesebbé és gyönyörűebbé tegyék. Eddig azonban ezeknek a szűrőknek a használata csak az alkalmazáson belül használható. Mi van, ha akarod használjon Instagram szűrőket a webes képeken, az alkalmazáson kívül, mint például a személyes blogjában vagy weboldalán feltüntetni kívánt fényképek?

Nos, a CSSGram, egy kis könyvtár, amely lehetővé teszi szerkessze fényképeit olyan szűrőkkel, amelyek hasonlóak az Instagram-alkalmazásban találhatóakhoz. Ellentétben a Photoshop-szal, ahol a szerkesztések manuálisak, vagy a Photoshop-műveletek révén, a CSSGram segítségével az egész folyamat CSS-en keresztül történik..

Hogyan működik

A hatás létrehozásához a CSSGram használja CSS szűrők és CSS keverési mód, alapvetően az effektusok összekeverése arra a pontra, ahol utánozza a kívánt Instagram-szűrőt. A hatásokat a képtartályra pszeudo-elemeken keresztül alkalmazzuk. Nézzük meg, hogyan történik ez az "1977-es" példa:

Itt van a hozzáadott ál-elem.

 ._1977 pozíció: relatív;  ._1977: után tartalom: ", kijelző: blokk, magasság: 100%, szélesség: 100%, felső: 0, bal: 0, pozíció: abszolút; 

És ez a CSS szűrő és Blend hozzáadta:

 ._1977 -webkit-szűrő: kontraszt (1,1) fényerő (1.1) telített (1.3); szűrő: a kontraszt (1.1) fényereje (1.1) telített (1.3);  ._1977: után háttér: rgba (243, 106, 188, 0,3); mix-blend-mode: képernyő;  

Hogyan kell használni

Nem tudjuk közvetlenül hozzáadni a szűrőosztályt a képelemhez, hanem hozzá kell adni a tartályhoz vagy a szülő osztályhoz, például

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;