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