Примечание. Следующая статья поможет вам: Режим наложения CSS3
Примечание: Эта функция здесь требует включения на странице chrome://flags для этого. Совет по CSS работать.
Если вы когда-либо использовали графический или фоторедактор, такой как Photoshop и Pixelmator, вы уже должны быть знакомы с режимами наложения. Режимы наложения — это набор режимов, который позволяет объекту смешиваться с другими объектамии поэтому создание контрастного вывода микса. Если все сделано правильно, режимы наложения могут дать очень заманчивый результат, как этот.
Режим наложения был функцией, доступной только в графических и фоторедакторах. В настоящее время вы можете найти его в сфере CSS. Давайте посмотрим, как это работает.
Начиная
Стоит отметить, что режим наложения CSS3 является экспериментальной функцией. Firefox и Chrome — единственные браузеры, которые поставляются с этой функцией на момент написания статьи.
Примечание: В Chrome, прежде чем он сможет отображать режим наложения CSS3, вам необходимо включить Возможности веб-платформы со страницы chrome://flags.
Фон и смешанный режим наложения
Есть два недавно введенных свойства CSS, касающиеся режима наложения: режим наложения mix и режим наложения background.
Режим смешивания определяет как содержимое элемента смешивается с другим содержимым под ним. В то время как свойство background-blend-mode, как следует из названия, обращается к цвету фона, фоновому изображению и фоновым градиентам.
Как и в Photoshop, мы можем применять следующие режимы наложения к этим свойствам CSS: нормальный, умножение, экран, наложение, затемнение, осветление, осветление цвета, затемнение цвета, жесткое освещение, мягкое освещение, различие, исключение. , оттенок, насыщенность, цвет и яркость.
Параметры режима наложения на панели слоев Photoshop.
Использование режима наложения CSS3
Логотип Google красочный, и он был создан во многих формах для проекта Google Doodle. В этом посте мы применим эффект смешивания к логотипу Google, чтобы проиллюстрировать, как работает эта новая функция CSS3.
Во-первых, давайте установим разметку: мы обернем каждую букву элементом span, чтобы мы могли указать разные цвета, а также правила стиля для буквы.
Затем мы добавляем цвета для бренда Google, полученные из BrandColors. Здесь мы выбираем элемент с помощью селектора nth-child, что позволяет нам применять стили без добавления дополнительных классов HTML к каждому элементу span, оборачивающему буквы.
.demo-wrapper .title { межбуквенный интервал: -25px; } span:first-child { color: #4285f4; положение: родственник; z-индекс: 100; } span:nth-child(2) { color: #db4437; } span:nth-child(3) { color: #f4b400; } span:nth-child(4) { color: #4285f4; положение: родственник; z-индекс: 100; } span:nth-child(5) { color: #0f9d58; } span:nth-child(6) { color: #db4437; }
На этом этапе вот как получается логотип. Логотип теперь выглядит более плотным, так как мы уменьшили пробел между буквами на -25px с помощью добавленного кода.
Теперь применим режим наложения.
span { режим смешивания: умножить; }
Оригинальных цветов логотипа, а также цветов пересекающихся букв получается больше.
Мы применили логотип как с непрозрачностью, так и с режимом наложения CSS3. Результат, как и ожидалось, отличный; цвета логотипа Google с примененной непрозрачностью выглядят устаревшими и блеклыми. См. демонстрацию их сравнения в действии ниже.