27.09.14, 13:43
0 комментарий
  Уроки

Учимся использовать режимы смешивания в CSS3

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

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

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

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

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

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

Учимся использовать режимы смешивания в CSS3


Режимы смешивания 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


Применение режимов смешивания в 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, что позволяет нам применять стили без необходимости использовать дополнительные 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 при помощи дополнительного кода.

Учимся использовать режимы смешивания в CSS3


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

span {
mix-blend-mode: multiply;
}


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

Учимся использовать режимы смешивания в CSS3


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



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

Напишите своё мнение