Как да прилагате Instagram филтри в уеб изображения

Много обичат да използват Instagram и филтрите, които идват с приложението, за да направят снимките си по-интересни и красиви. Досега обаче използването на тези филтри е ограничено до използването му в приложението. Ами ако искаш използвайте Instagram филтри на уеб изображения, извън приложението, като снимки, които искате да поставите в личния си блог или уебсайт?

Е, можете да използвате CSSGram, малка библиотека, която ви позволява редактирайте снимките си с филтри, които са подобни на това, което можете да намерите в приложението Instagram. За разлика от Photoshop, където редакциите са ръчни или се извършват чрез Photoshop, с CSSGram, целият процес се извършва чрез CSS.

Как работи

За да генерира ефекта, CSSGram използва CSS филтри и Режим на смесване на CSS, основно смесване на ефектите до точката, където той имитира желания филтър на Instagram. Ефектите се прилагат към контейнера за изображения чрез псевдо-елементи. Нека проверим как става това с този пример от 1977 г .:

Ето добавения псевдоелемент.

 ._1977 position: relative;  ._1977: след content: "; дисплей: блок; височина: 100%; ширина: 100%; отгоре: 0; ляво: 0; позиция: абсолютна; 

А това е CSS филтърът и добавени Blend:

 ._1977 -Вебкит филтър: контраст (1.1) яркост (1.1) наситен (1.3); филтър: контраст (1.1) яркост (1.1) наситен (1.3);  ._1977: след фон: rgba (243, 106, 188, 0.3); режим микс-смес: екран;  

Как да използвам

Не можем да добавим класа на филтъра директно към елемента на изображението, той трябва да бъде добавен към контейнера или родителския клас, например с

 @import "продавач / cssgram"; 

 .my-class … @extend% _1977;