От автора: в последние годы веб-дизайн, особенно CSS, приобрели предсказуемый характер. Во-первых, мы создаем специальные эффекты, которые интенсивно используют изображения, внешние библиотеки или и то, и другое. Затем приходит CSS и добавляет эти возможности — значительно сокращая потребность во внешних ресурсах. Это означает, что большая часть скрытой мощности, которая нам нужна, просто встроена в браузер.
Режим наложения CSS является одним из таких открытий. Он позволяет элементам отображать цвета как переднего, так и фонового слоев. Это работает во многом так же, как в режимы наложения Photoshop — создавая интересные эффекты.
Хотя поддержка браузерами на момент написания этой статьи не составляла 100% (все из-за, или почти все из-за, Microsoft), дизайнеры уже изучают, чего можно достичь с помощью режимов наложения. Посмотрите на некоторые из наиболее интересных примеров, которые мы нашли.
Разница, которую может дать наложение
Давайте начнем с этой удобной демонстрации, которая показывает, что каждый режим наложения делает с фоновым изображением. Используйте раскрывающееся меню и посмотрите, как различные режимы влияют на отображение. Количество вариаций может вас удивить.
Темы фонов
Вот очень практичное использование режимов наложения CSS. Выберите фотографию в этой галерее, и вы можете получить больше, чем просто полноразмерное изображение. Вы также найдете смешанную и размытую версию изображения фона, что сделает процесс погружения более захватывающим.
Фильтр и смесь
Потенциальные возможности манипулирования изображениями с помощью CSS удивительны. Этот инструмент предлагает визуальное доказательство, позволяя вам настроить базовые / средние / яркие эффекты и используемые цвета. Конечный результат может сильно отличаться от оригинала.
Меньше кода, больше результатов
Эта тщательно смешанная фотография дает пример того, чего можно достичь с помощью только CSS. Что делает ее еще более впечатляющей, так это то, что таблица стилей составляет всего пять строк. Это вопрос настройки фонового изображения, добавления градиента и смешивания. Вы не сможете создать этот эффект так быстро даже в редакторе изображений!
Прогрессивная навигация
Режимы наложения могут использоваться не только для потрясающих эффектов изображения. Здесь он используется в качестве полезного микровзаимодействия в меню навигации на основе прокрутки. Пользователи могут видеть текущую главу, которую они читают, основываясь на непрозрачности цвета пункта меню. Более того, эффект также указывает, находитесь ли вы в начале или в конце главы. Здесь также очень помогает jQuery, отслеживая положение прокрутки.
Двойное впечатление
Процесс многократной экспозиции фотографии объединяет два изображения в одно. Эта концепция используется здесь с отличным эффектом: фоновая фотография сочетается с анимированным GIF-изображением для создания чего-то довольно психоделического. Это также усиливает желание играть в некоторые классические видеоигры.
Радикальный текст
Комбинируйте режимы наложения с текстом SVG, и вы сможете создавать великолепные эффекты. В этом примере создаются два слоя текста. Один имеет цвет заливки, другой — контур. Затем они располагаются со смещением относительно друг друга, что создает привлекательный вид. Этот даже адаптивно.
Бесшовная радуга
Мы закроем нашу коллекцию примером того, как немного креатива может иметь большое значение. Эта потрясающая радуга цветов может выглядеть очень сложной. Однако на самом деле она состоит из трех довольно простых CSS-градиентов в сочетании с режимом наложения. Иногда простое работает лучше.
Заключение
Режимы наложения CSS предлагают приятное изменение для всех видов элементов дизайна. Хотя мы тесно связываем их с изображениями, приведенные выше примеры демонстрируют и другие применения. Режимы наложения могут использоваться для таких элементов, как текст и даже меню навигации.
Еще лучше то, что они используют технику, которую мы давно видели в полиграфическом дизайне, и сделали ее чем-то, что мы можем легко реализовать в Интернете — редактор изображений не требуется.
Потратьте некоторое время, чтобы поэкспериментировать с режимами наложения CSS и посмотреть, как они могут улучшить ваш следующий проект.
Автор: Eric Karkovack
Источник: https://speckyboy.com
Редакция: Команда webformyself.