55. mix-blend-mode

В этом уроке мы познакомимся с мощным CSS-свойством mix-blend-mode, которое позволяет смешивать цвета элементов с цветами элементов, расположенных под ними. Это открывает широкие возможности для создания креативных визуальных эффектов прямо в браузере.

Что такое mix-blend-mode?

mix-blend-mode определяет, как цвет элемента должен смешиваться с цветом элемента, расположенного непосредственно под ним. Представьте, что у вас есть два слоя в Photoshop, и вы меняете режим наложения одного из них. mix-blend-mode делает то же самое, но в CSS.

Вот основные значения mix-blend-mode:

• normal: Стандартное поведение. Верхний элемент полностью перекрывает нижний.
• multiply: Умножает значения цветов верхнего и нижнего слоев. Результат всегда темнее.
• screen: Инвертирует значения цветов, умножает их, а затем снова инвертирует. Результат всегда светлее.
• overlay: Комбинация multiply и screen. Светлые области становятся светлее, темные - темнее.
• darken: Выбирает самый темный из цветов верхнего и нижнего слоев.
• lighten: Выбирает самый светлый из цветов верхнего и нижнего слоев.
• color-dodge: Осветляет нижний слой, отражая цвет верхнего слоя.
• color-burn: Затемняет нижний слой, отражая цвет верхнего слоя.
• hard-light: Комбинация multiply и screen, но цвета меняются местами.
• soft-light: Более мягкая версия hard-light.
• difference: Вычитает более темный цвет из более светлого.
• exclusion: Похож на difference, но с меньшим контрастом.
• hue: Сохраняет оттенок верхнего слоя, а яркость и насыщенность берет от нижнего.
• saturation: Сохраняет насыщенность верхнего слоя, а оттенок и яркость берет от нижнего.
• color: Сохраняет оттенок и насыщенность верхнего слоя, а яркость берет от нижнего.
• luminosity: Сохраняет яркость верхнего слоя, а оттенок и насыщенность берет от нижнего.

Практические примеры

Давайте рассмотрим несколько примеров, чтобы лучше понять, как это работает.

Пример 1: multiply

<div class="container">
  <div class="background"></div>
  <div class="foreground multiply"></div>
</div>

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Замените на реальное изображение */
}

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.5); /* Красный полупрозрачный цвет */
}

.multiply {
  mix-blend-mode: multiply;
}

В этом примере красный полупрозрачный цвет (foreground) смешивается с изображением фона (background) в режиме multiply. Темные области изображения станут еще темнее, а светлые - приобретут красноватый оттенок.

Пример 2: screen

<div class="container">
  <div class="background"></div>
  <div class="foreground screen"></div>
</div>

/*  Предыдущие стили для .container и .background остаются прежними */

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 255, 0.5); /* Синий полупрозрачный цвет */
}

.screen {
  mix-blend-mode: screen;
}

Здесь синий полупрозрачный цвет смешивается с фоном в режиме screen. Темные области изображения станут светлее, приобретая голубоватый оттенок.

Жизненный пример

mix-blend-mode часто используется для создания интересных эффектов при наведении на элементы, для выделения текста на фоне изображений, а также для стилизации логотипов и иллюстраций. Например, многие сайты, посвященные дизайну или фотографии, используют mix-blend-mode, чтобы придать своим изображениям уникальный вид. Фреймворки и библиотеки CSS также могут использовать mix-blend-mode для создания сложных визуальных компонентов. Посмотрите, как крупные бренды используют mix-blend-mode для создания интересных эффектов на своих сайтах.

Ключевые моменты

• mix-blend-mode позволяет смешивать цвета элементов с цветами элементов, расположенных под ними.
• Существует множество режимов смешивания, каждый из которых дает уникальный визуальный эффект.
• Экспериментируйте с различными значениями mix-blend-mode, чтобы найти подходящие для вашего проекта.
• mix-blend-mode можно использовать для создания креативных эффектов при наведении, стилизации текста и изображений.
• mix-blend-mode полезен для создания современных и привлекательных веб-дизайнов.

Интерактивный пример