Как использовать режим смешивания CSS3 [CSS3 Tips]
Примечание. Для работы этой функции требуется включение на странице 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 с примененной непрозрачностью выглядят устаревшими и блеклыми. Смотрите демонстрацию их сравнения в действии ниже.
Другие ресурсы
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)