Если вы когда-либо использовали графический редактор, такой как Photoshop или Pixelmator, вы, вероятно, уже знакомы с режимами наложения. Режимы наложения — это ряд режимов, которые позволяют объекту смешаться с другими объектами, и создают таким образом результирующее изображение. При правильном использовании режим наложения позволит получить впечатляющий результат, например, такой:

Применение режима наложения в логотипе, автор Ivan Bobrov.

Обратите внимание: чтобы этот режим работал, требуется включить его на странице chrome://flags.

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

Приступим 

Стоит отметить, что режим наложения в CSS – это экспериментальное свойство. Только современные версии браузеров Firefox и Chrome на момент написания урока его поддерживают.

Обратите внимание: в браузере Chrome, чтобы режим наложения работал, нужно включить экспериментальные функции веб-платформы на странице chrome://flags.

Фоновый и смешивающий режимы наложения 

У режима наложения существуют два недавно введенных свойства CSS: mix-blend-mode и background-blend-mode.

Свойство mix-blend-mode определяет, как содержимое элемента накладывается на другое содержимое под ним. А свойство background-blend-mode, как видно из названия, обращается к цвету фона, фоновому изображению и градиентам фона.

Как и в Photoshop, мы можем применить следующие режимы наложения к свойствам CSS: normal (), multiply (), screen (), overlay (), darken (), lighten (), color-dodge (), color-burn (), hard-light (), soft-light (), difference (), exclusion (), hue (), saturation (), color () и luminosity ().

Настройки режима наложения в панели слоев Photoshop.

Использование режима наложения CSS3 

Логотип Google красочный, и ему придавали разные формы для проекта Google Doodle. В этом уроке мы применим эффект наложения на логотипе Google, чтобы проиллюстрировать, как работает это новое свойство CSS3.

Сначала давайте создадим разметку: мы обернем каждую букву в элемент span, чтобы мы могли задать разные цвета и правила стилей для разных букв.

<h1>
<span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</h1>

После этого мы добавим цвета для логотипа Google, полученные с сайта BrandColors. В этом месте мы выберем элемент, используя селектор nth-child, который позволит нам применить стили без добавления дополнительных классов каждому элементу span, оборачивающему буквы.

.demo-wrapper .title {
    letter-spacing: -25px;
}
span:first-child {
    color: #4285f4;
    position: relative;
    z-index: 100;
}
span:nth-child(2) {
    color: #db4437;
}
span:nth-child(3) {
    color: #f4b400;
}
span:nth-child(4) {
    color: #4285f4;
    position: relative;
    z-index: 100;
}
span:nth-child(5) {
    color: #0f9d58;
}
span:nth-child(6) {
    color: #db4437;
}

Вот так выглядит логотип на этом этапе. Логотип выглядит более плотно, так как мы уменьшили промежутки между буквами на -25px при помощи дополнительного кода.

Теперь мы применим режим наложения.

span {
mix-blend-mode: multiply;
}

Исходные цвета логотипа, как и цвета пересекающихся частей букв, выглядят более яркими.

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

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Смотрите также:

• Знакомство с единицами измерения CSS: пикселями, EM и процентами
• Создаем круговые и эллиптические градиенты с использованием CSS3
• Знакомство со структурным селектором CSS3 :first-of-type