Учимся использовать режимы смешивания в CSS3 » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

17.03.2015
Без рубрики

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

Примечание: для начала вам нужно будет включить поддержку этой функции в меню chrome://flags.

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

Приступаем к работе

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

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

Режимы смешивания Background и Mix

Совсем недавно было представлено два новых 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.

Применение режимов смешивания в CSS3

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

Google

Затем, мы добавляем цвета бренда Google, полученные при помощи BrandColors. Здесь мы выделяем элемент при помощи использования селектора nth-child, что позволяет нам применять стили без необходимости использовать дополнительные HTML-классы в каждом 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 при помощи дополнительного кода. Теперь применяем режим смешивания Blend.

span {
mix-blend-mode: multiply;
}

Исходные цвета логотипа, а также цвета пересекающихся букв, становятся более яркими. Мы применили к логотипу как Opacity, так и CSS3 Blend Mode. Результат, как мы и ожидали, очень отличается. Цвета логотипа Google с примененными параметрами уровня плотности, выглядит довольно тускло. Предлагаем вам ознакомиться с представленным ниже демо.

Исходники в архиве.