Как применить 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);
режим смешивания: экран;
}
Как пользоваться
Мы не можем добавить класс фильтра непосредственно к элементу изображения, его нужно добавить в контейнер или родительский класс, например, с помощью
Код будет выглядеть так:

Не забудьте включить библиотеку CSSgram Вот) в ваш HTML-документ.
Я создал демонстрацию изображений до и после добавления фильтра, и результат очень хороший. На данный момент в библиотеке есть 13 фильтров. Ниже вы можете увидеть различия между исходным изображением и изображением под фильтрами «1977», «Аден» и «Гингем».Увидеть перо rOKPmW
Если вы просто заинтересованы в использовании любого из стилей, вы можете загрузить отдельные файлы CSS соответственно.
Использование SCSS
Если вы хотите добавить фильтры в текущий класс контейнера изображений без изменения имени, вы можете сделать это, расширив эффект фильтра внутри ваших файлов SCSS. Вот как это сделать.
во-первых скачать исходный файл SCSS и импортируйте ваш файл SCSS.
@import ‘vendor / cssgram’;
Предположим, у вас есть структура HTML, как показано ниже:

Затем в вашем style.scss расширьте фильтр следующим образом:
.мои занятия {
…
@extend% _1977;
}
Больше постов в Instagram
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)