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