Как применить Instagram фильтры на веб-изображениях
Многие любят использовать Instagram и фильтры, которые идут с приложением, чтобы сделать их фотографии более интересными и красивыми. Пока что использование этих фильтров ограничено использованием внутри приложения. Что, если вы хотите использовать фильтры Instagram для веб-изображений вне приложения, например для фотографий, которые вы хотите разместить в своем личном блоге или на веб-сайте?
Искусственный интеллект поможет тебе заработать!
Ну, вы можете использовать CSSGramнебольшая библиотека, которая позволяет редактировать фотографии с помощью фильтров, похожих на те, которые вы можете найти в приложении Instagram. В отличие от Photoshop, где редактирование выполняется вручную или с помощью действий Photoshop, с помощью CSSGram весь процесс выполняется с помощью CSS.
Как это работает
Чтобы сгенерировать эффект, CSSGram использует фильтры CSS и режим смешивания CSS, в основном смешивая эффекты до точки, где он имитирует желаемый фильтр Instagram. Эффекты применяются к контейнеру изображения через псевдоэлементы. Давайте посмотрим, как это делается на примере “1977 года”:
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Вот добавленный псевдоэлемент.
._1977 {
положение: относительное;
}
._1977: после того, как {
содержание: ”;
дисплей: блок;
высота: 100%;
ширина: 100%;
верх: 0;
слева: 0;
положение: абсолютное;
}
И это CSS-фильтр и Blend добавил:
._1977 {
-webkit-фильтр: контраст (1.1), яркость (1.1), насыщенность (1.3);
фильтр: контрастность (1,1), яркость (1,1), насыщенность (1,3);
}
._1977: после {
фон: RGBA (243, 106, 188, 0,3);
режим смешивания: экран;
}
Как пользоваться
Мы не можем добавить класс фильтра непосредственно к элементу изображения, его нужно добавить в контейнер или родительский класс, например, с помощью