CSS - Mix Blend Mode: Unleashing the Power of Color Blending

Здравствуйте,野心勃勃 веб-дизайнеры и энтузиасты CSS! Сегодня мы окунемся в fascинирующий мир CSS mix-blend-mode. Как ваш доброжелательный соседский компьютерный учитель, я рад помочь вам в этом красочном путешествии. Так что берем ваши виртуальные кисти и lets get blending!

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

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

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

Possible Values

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

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

Применяется к

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

Синтаксис

Синтаксис для mix-blend-mode Refreshingly прост:

element {
mix-blend-mode: <blend-mode>;
}

Где <blend-mode> - один из значений из нашей таблицы выше. Легко как pie!

CSS mix-blend-mode - Different mix-blend-mode Values

Давайте脏 our hands с примерами кода. Мы начнем с простого сценария: смешивание двух перекрывающихся div элементов.

<div class="container">
<div class="box red"></div>
<div class="box blue"></div>
</div>

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

.box {
position: absolute;
width: 100px;
height: 100px;
}

.red {
background-color: red;
top: 0;
left: 0;
}

.blue {
background-color: blue;
top: 50px;
left: 50px;
mix-blend-mode: screen;
}

В этом примере у нас есть два ящика: один красный и один синий. Синий ящик находится поверх красного ящика и имеет mix-blend-mode 'screen'. Это создает более светлый цвет в месте их пересечения.

Попробуйте изменить mix-blend-mode на разные значения из нашей таблицы и посмотрите, как изменяется результат. Это как проводить красочный научный эксперимент!

CSS mix-blend-mode - With HTML

Теперь давайте посмотрим, как mix-blend-mode работает с элементами HTML. Мы создадим простой пример с текстом поверх изображения.

<div class="image-container">
<img src="landscape.jpg" alt="Beautiful landscape">
<h1>Hello, World!</h1>
</div>

.image-container {
position: relative;
}

.image-container img {
width: 100%;
height: auto;
}

.image-container h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: white;
mix-blend-mode: difference;
}

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

CSS mix-blend-mode - With SVG

Элементы SVG также могут受益 от mix-blend-mode. Давайте создадим простой пример с перекрывающимися SVG кругами.

<svg width="200" height="200">
<circle cx="70" cy="70" r="60" fill="red" />
<circle cx="130" cy="130" r="60" fill="blue" mix-blend-mode="multiply" />
</svg>

В этом SVG у нас есть два круга: один красный и один синий. Синий круг имеет mix-blend-mode 'multiply', который затемняет перекрывающуюся область.

CSS mix-blend-mode - With Text

Наконец, давайте повеселимся с текстом! Мы создадим эффектный текстовый эффект с использованием mix-blend-mode.

<div class="text-container">
<h1>CSS is Awesome!</h1>
</div>

.text-container {
background: linear-gradient(to right, red, blue);
padding: 20px;
}

.text-container h1 {
font-size: 48px;
color: white;
mix-blend-mode: difference;
}

Это создает яркий текстовый эффект, где цвет текста изменяется в зависимости от фона градиента.

И вот мы и здесь,folks! Мы исследовали магический мир CSS mix-blend-mode. Помните, ключ к maîtriser это свойство - эксперимент. Не бойтесь играть с разными режимами смешения и видеть, какие потрясающие эффекты вы можете создать.

Пока мы заканчиваем это красочное путешествие, я вспоминаю цитату знаменитого художника Боба Росса: "There are no mistakes, only happy accidents." Так что идите смело, смешивайте без страха и создавайте свои собственные счастливые случаи с CSS mix-blend-mode!

Credits: Image by storyset