Как применить Instagram фильтры на веб-изображениях

Многие любят использовать Instagram и фильтры, которые идут с приложением, чтобы сделать их фотографии более интересными и красивыми. Пока что использование этих фильтров ограничено использованием внутри приложения. Что делать, если вы хотите использовать фильтры Instagram на веб-изображениях, за пределами приложения, например, фотографии, которые вы хотите разместить в своем личном блоге или на сайте?

Ну, вы можете использовать CSSGram, небольшую библиотеку, которая позволяет вам редактируйте свои фотографии с помощью фильтров, которые похожи на те, которые вы можете найти в приложении Instagram. В отличие от Photoshop, где редактирование выполняется вручную или выполняется с помощью действий Photoshop, в CSSGram весь процесс выполняется с помощью CSS..

Как это устроено

Для создания эффекта CSSGram использует CSS фильтры а также Режим смешивания CSS, в основном смешивая эффекты до такой степени, что имитирует желаемый фильтр Instagram. Эффекты применяются к контейнеру изображения через псевдоэлементы. Давайте посмотрим, как это делается на примере «1977»:

Вот добавленный псевдоэлемент.

 ._1977 позиция: относительная;  ._1977: после content: "; отображение: блок; высота: 100%; ширина: 100%; верх: 0; слева: 0; положение: абсолютное; 

И это CSS-фильтр и Blend добавил:

 ._1977 -webkit-filter: контраст (1.1), яркость (1.1), насыщенность (1.3); фильтр: контрастность (1,1), яркость (1,1), насыщенность (1,3);  ._1977: после фон: rgba (243, 106, 188, 0,3); режим смешивания: экран;  

Как пользоваться

Мы не можем добавить класс фильтра непосредственно к элементу изображения, его нужно добавить в контейнер или родительский класс, например, с помощью

 @import 'vendor / cssgram'; 

 .my-class … @extend% _1977;