—»     —»   Учимся использовать режимы смешивания в CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

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



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

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

Учимся использовать режимы смешивания в CSS3
Приложение Blend Mode в логотипе Ивана Боброва

Режим смешивания ранее можно было менять только в графических или фото-редакторах. Сегодня же, эту же функцию можно видеть и в 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
Опции режимов смешивания на панели слоев в Photoshop.

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

Посмотреть демо | Скачать исходный код
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4038   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930