CSSgram

Библиотека Юны Кравитс которая позволяет создавать фильтры Instagram на CSS

Как вы пришли к идее создания фильтров Instagram на CSS для CSSgram?

ЮН: Если честно, то сами фильтры Instagram были не главной целью. Я много экспериментировала в последнее время с CSS фильтрами, градиентами и режимами смешивания, и сделала несколько живых примеров. Данную работу я представила на CSS Conf ЕС. С помощью фильтров Instagram в качестве примеров, я показала, как можно создать любой визуальный эффект, который вы хотите, прямо в браузере. Тогда я получила много предложений, что бы эти фильтры были доступны для общего пользования в Интернете.

Как пользователи могут создавать подобные эффекты фильтра?

ЮН: В основном, это сочетание CSS фильтров (сепия, оттенки серого, насыщенность и так далее) и псевдо-элементов, которые имеют либо сплошной цвет или состоят из градиентов и смешиваются в верхней части изображения с помощью режимов наложения CSS. Есть почти неограниченные комбинации вариаций.

Что вы больше всего любите в своем проекте?

ЮН: Это было довольно приятным провести несколько вечеров за тонкой настройкой цвета и изучить режимы смешивания, чтобы выяснить самые интересные комбинации. Я знаю, это звучит странно, но это было довольно расслабляющим.

Вы сталкивались с какими-то трудностями?

ЮН: CSS пока не позволяет манипулировать отдельными каналами (т.е. RGB каналы). Действительно трудно достичь некоторые эффекты фильтров Instagram, так как варианты, которые были для смешивания цветов ограничены.

У вас есть любимый фильтр?

ЮН: Мой любимый фильтр, тостер, потому что это очень непросто, и я люблю цвета, которые он создает, но мой самый часто используемый фильтр, вероятно, Mayfair. Он делает все е отлично смотрящимся гораздо более тонким способом.

Вы узнали что-нибудь новое или неожиданное, делая CSSgram?

ЮН: Много фильтров Instagram удивительно похожи! Но самое главное, что я узнала, то что как только вы попробуете создавать эффекты на изображения на CSS это будет легко и просто. Я думаю, что каждый должен попробовать. Кто знает, может быть, мой следующий проект будет инструментом, чтобы помочь людям делать только это.

Проект: www.una.im/CSSgram/
Автор проекта: www.una.im
Использовано: CSS
Источник: Net Magasine, 02.2016
Перевод: Сергей Михеев