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

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

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

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

._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, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)