Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

Обесцвечивание на CSS через режим наложения

Обесцвечивание на CSS через режим наложения

Сегодня будем учиться делать эффект выборочного обесцвечивания через режим наложения на CSS.

Обесцвечивание на CSS через режим наложения

Посмотри на картинку выше. Данный эффект совершенно не новый и художники им постоянно пользуются, но нас, интересует именно технический аспект данного вопроса. Нам нужно обесцветить всю картинку, но при этом, оставить красный цвет.

Сразу же покажу конечный результат. Вот, что должно получиться в итоге:

Оригинал фотографии взял вот тут

Фотографию посмотрели, живой пример тоже, теперь перейдём к разбору техники работы.

Изначально было решение подготовить под конкретную картинку чёрно-белую SVG-маску, которую можно было бы наложить на цветную картинку. Заранее вырезать под красные цвета части этой маски и в итоге через эти дырки в чёрно-белом изображении будут просвечиваться цветные части оригинальной картинки. Но понятное дело, что такое решение не подходит по многим параметрам. Во-первых, оно неуниверсальное. Под каждую картинку нужно будет делать отдельную маску. Во-вторых, это запарно и муторно, нахер нужно из за какого-то эффекта, который можно и в фотошопе быстрее сделать, готовить маски. Короче жопа...

В итоге, на помощь как Чип и Деил спешит CSS и его режим наложения (blend modes). Данный способ и универсален и просто в использовании. И хуй с ним, что горсточка недобраузеров его не поддерживает. Зато как красиво.

Ссылку уже дал, почитать по режим наложения, но если вкратце и по-русски, то по умолчанию слои в CSS располагаются друг поверх друга и не просвечивают.

Вот так в нормальном режиме

А можно сделать так, чтобы слои были не просто один за одним, а смешивались по определённо заданному алгоритму:

Вот так в режиме наложения

Данные режимы, благодаря сотрудникам Adobe, пришли в CSS из Photoshop. К сожалению они не все попали в CSS, доступных на данный момент есть 16 вариантов смешивания слоёв. Мы сейчас не будем разбираться со всеми, если интересно, можно поиграться со слоями в демке Сары. Мы возьмём селективное обесцвечивание.

Начнём с того, что на изображение наложим его же копию.

.photo {
  --source: url(http://source.unsplash.com/2uV2gMUEY9M);

  /* это нижний слой */
  background-image: var(--source);
}

.photo::after {
  /* это верхний слой */
  background-image: var(--source);
}

Затем, нужно изменить у верхнего слоя режим наложения на lighten. при этом режиме светлые участки остаются непрозрачными, а вот тёмные начинают просвечиваться.

Нужно добавить свойство mix-blend-mode.

.photo::after {
  mix-blend-mode: lighten;
}

В итоге получилось то, что было нужно. Светлые участки остались непрозрачными, а темные участки верхнего слоя стали прозрачными.

Следующим шагом с помощью CSS-фильтра нужно обесцветить верхний слой:

.photo::after {
  filter: grayscale(1);
}

Отлично, верхний слой накладывается светлыми обесцвеченными участками на нижнюю цветную фотографию:

Супер, почти то, что нужно. Осталось светлые участки верхнего слоя сделать более непрозрачными. Вновь воспользуемся режимом наложения, на этот раз background-blend-mode. Данный режим задаёт режим смешивания фоновых элементов одного слоя: изображения, фоновый цвет, градиент.

Задаём для верхнего слоя серый фоновый цвет и режим смешивания картинки с ним hard-light см. демо. Это комбинированный режим, который делает цвета ярче. Примечательно, что в чёрно-белом изображении он делает его светлые части более контрастными.

В итоге имеем желаемый результат.

Если использовать данную комбинацию режимов наложения прозрачными становятся области красного, синего и фиолетового оттенков, а жёлто-оранжевые, зелёные и голубые остаются непрозрачными.

Конечно подобные режимы не часто будешь использовать, однако очень интересная методика и в каких-нибудь проектах её можно использовать.


0 комментариев. Будь первым, порадуй автора
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Kanaspo.com — Дизайн и разработка Пользовательское соглашение Политика конфиденциальности
Вверх
Kanaspo Project — Дизайн, разработка, технологии, новости IT

с помощью аккаунта в соц. сетях

или

Восстановить пароль