Примечание. Для работы этой функции требуется включение на странице chrome: // flags.

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Рекомендуемое чтение: понимание цветовых функций LESS

Начиная

Стоит отметить, что CSS3 Blend Mode является экспериментальной функцией. Firefox и Chrome – единственный браузер, который поставляется с этой функцией на момент написания.

Примечание. В Chrome, прежде чем он сможет отобразить CSS3 Blend Mode, вам нужно будет включить функции веб-платформы со страницы chrome: // flags.

Режим смешивания фона и смешивания

В режиме смешивания появилось два новых CSS-свойства: mix-blend-mode и background-blend-mode.

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

Как и в Photoshop, мы можем применять следующие режимы наложения к этим свойствам CSS: нормальный, умножение, экран, наложение, затемнение, осветление, цветопередача, цветовой прожиг, жесткий свет, мягкий свет, разница, исключение , оттенок, насыщенность, цвет и яркость.
Параметры режима наложения в панели «Слой Photoshop».

Использование CSS3 Blend Mode

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

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

гоогLе

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

.demo-wrapper .title {
межбуквенный интервал: -25px;
}
span: first-child {
цвет: # 4285f4;
положение: относительное;
z-индекс: 100;
}
span: nth-child (2) {
цвет: # db4437;
}
span: nth-child (3) {
цвет: # f4b400;
}
span: nth-child (4) {
цвет: # 4285f4;
положение: относительное;
z-индекс: 100;
}
span: nth-child (5) {
цвет: # 0f9d58;
}
span: nth-child (6) {
цвет: # db4437;
}

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

Теперь мы применяем режим смешивания.

span {
режим смешивания: умножение;
}

Оригинальные цвета логотипа, а также цвета пересекающихся букв получается более яркий,

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