x
 
Юрий Мазурский
11 июля 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Всем дизай­не­рам известны режимы нало­же­ния слоёв в гра­фи­че­ских редак­то­рах — multiply, overlay, screen и дру­гие. Режимы нало­же­ния поз­во­ляют сме­ши­вать содер­жи­мое слоев раз­ными способами.

Ана­ло­гич­ный функ­ци­о­нал есть и в ЦСС. Режимы нало­же­ния под­дер­жи­ва­ются боль­шин­ством попу­ляр­ных бра­у­зе­ров, но с неко­то­рыми ого­вор­ками. С режи­мами нало­же­ния удобно созда­вать обложки и изоб­ра­же­ния из несколь­ких слоёв на лету, а не скле­и­вать их в Фото­шопе и сохра­нять в виде картинок.

Всего есть шест­на­дцать режи­мов наложения:

Изображения и описание режимов наложения из спецификации W3C.

В составлении спецификации участвует компания Adobe.

normal

Режим по умол­ча­нию — цвета не сме­ши­ва­ются. Ито­го­вые цвета берутся из верх­него слоя.

Хром, Файр­фокс, Сафари

multiply

Цвета фона и верх­него слоя умно­жа­ются. Ито­го­вые цвета все­гда тем­нее или такие же по ярко­сти, как цвета верх­него слоя или фона. Умно­же­ние на чёр­ный цвет все­гда даёт чёр­ный. Умно­же­ние на белый остав­ляет исход­ный цвет.

Хром, Файр­фокс, Сафари

screen

Раз­ность белого цвета с цве­тами фона умно­жа­ется на раз­ность белого с цве­тами верх­него слоя, затем вычис­ля­ется раз­ность белого и резуль­тата умножения.

Хром, Файр­фокс, Сафари

overlay

К цве­там верх­него слоя при­ме­ня­ются режимы multiply или screen, в зави­си­мо­сти от ярко­сти цве­тов фона. Цвета фона сме­ши­ва­ются с цве­тами верх­него слоя, сохра­няя яркость фона.

Хром, Файр­фокс, Сафари

darken

Из цве­тов фона и верх­него слоя выби­ра­ются самые тёмные.

Хром, Файр­фокс, Сафари

lighten

Из цве­тов фона и верх­него слоя выби­ра­ются самые светлые.

Хром, Файр­фокс, Сафари

color‑dodge

Цвета фона освет­ля­ются до цве­тов верх­него изображения.

Хром, Файр­фокс, Сафари

color‑burn

Цвета фона затем­ня­ются до цве­тов верх­него изображения.

Хром, Файр­фокс, Сафари

hard‑light

К цве­там верх­него слоя при­ме­ня­ются режимы multiply или screen, в зави­си­мо­сти от ярко­сти цве­тов фона. Этот режим — overlay наоборот.

Хром, Файр­фокс, Сафари

soft‑light

Цвета освет­ля­ются или затем­ня­ются, в зави­си­мо­сти от ярко­сти цве­тов верх­него слоя.

Хром, Файр­фокс, Сафари

difference

Более тём­ный цвет вычи­та­ется из более светлого.

Хром, Файр­фокс, Сафари

exclusion

Эффект похож на difference, но с умень­шен­ным контрастом.

Хром, Файр­фокс, Сафари

hue

Цвета состав­ля­ются из тона цве­тов верх­него слоя, ярко­сти и насы­щен­но­сти цве­тов фоно­вого слоя.

Хром, Файр­фокс

saturation

Цвета состав­ля­ются из насы­щен­но­сти цве­тов верх­него слоя, ярко­сти и тона цве­тов фоно­вого слоя.

Хром, Файр­фокс

color

Цвета состав­ля­ются из тона и насы­щен­но­сти цве­тов верх­него слоя и ярко­сти цве­тов фоно­вого слоя.

Хром, Файр­фокс

luminosity

Цвета состав­ля­ются из ярко­сти цве­тов верх­него слоя, тона и насы­щен­но­сти цве­тов фоно­вого слоя. Эффект обра­тен режиму color.

Хром, Файр­фокс

Изображения и описание режимов наложения из спецификации W3C.

В составлении спецификации участвует компания Adobe.

Теперь к прак­тике. Для управ­ле­ния сме­ше­нием есть два свой­ства — background-blend-mode и mix-blend-mode.

background‑blend‑mode

Сме­ши­вает фоно­вые изоб­ра­же­ния эле­мента, цвет или гра­ди­енты друг с другом:

.blended {
  background-color: #f00;
  background-image: url('some-image.jpg');
  background-blend-mode: lighten;
}

mix‑blend‑mode

Сме­ши­вает сосед­ние эле­менты. Берём фото­гра­фию, поверх неё ста­вим гра­ди­ент, а сверху надпись:

<div class="blended">
  <div class="boats">Лодки</div>
  <div class="gradient"></div>
  <img src="some-image.jpg" />
</div>
.boats {
  position: absolute;
  bottom: 15px;
  left: 20px;
  font: bold 70px/70px bureausans, sans-serif;
  color: blue;
  mix-blend-mode: multiply;
  z-index: 3;
}

.gradient {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(-120deg, #00f 0, #f00 100%);
  mix-blend-mode: lighten;
  z-index: 2;
}
Лодки

Как и в гра­фи­че­ских редак­то­рах, самые ходо­вые режимы — multiply, screen, overlay. Неко­то­рые режимы поэк­зо­тич­нее не под­дер­жи­ва­ются в Сафари, а в Интер­нет экс­пло­рере и Эдже режимы нало­же­ния не под­дер­жи­ва­ются вовсе. Для опре­де­ле­ния под­держки режи­мов нало­же­ния в кон­крет­ном бра­у­зере, можно исполь­зо­вать биб­лио­теку Modernizr. Если не под­дер­жи­ва­ются, можно преду­смот­реть и вклю­чать аль­тер­на­тив­ные эффекты. Либо про­сто ста­раться исполь­зо­вать эффекты попроще и обой­тись opacity в слу­чае нера­бо­та­ю­щих режи­мов наложения.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Павел Аносов
11 июля 2019

Умножение на белый дает второй цвет, а не белый (1·x = x).

Юрий Мазурский
11 июля 2019

Павел, спасибо! Исправил.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Как отслеживать и обрабатывать чит-коды 1 Существует ли способ проверить компетентность веб-разработчика, если сам ничего не понимаешь в этом? ЦСС-переменные: как использовать и для чего могут пригодиться 2 Принцип «не протыкал — не сделал» 4




Недавно всплыло

2 2 В бюро есть таймтрекинг для сотрудников? 5 Как найти себе замену 1