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



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

СКАЧАТЬ

Вес файла
1.11 Kb

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204