Всем дизайнерам известны режимы наложения слоёв в графических редакторах — 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы