Когда вы слышите обсуждение функций CSS Blend Modes, то обычно речь идет о трех новых свойствах CSS, которые получили хорошую поддержку в современных браузерах.
Вот эти свойства:
background-blend-mode— для смешивания фоновых изображений, градиентов и цветов фона элементов;mix-blend-mode— для смешивания элементов с другими элементами;isolation– менее используемое свойство, которое применяется вместе с mix-blend-mode для предотвращения смешивания элементов.
Как бы то ни было, эта статья будет посвящена background-blend-mode, свойству, которое пользуется наиболее широкой поддержкой, и возможностям его использования для создания на своем сайте привлекательных фонов и фотоэффектов, которые когда-то были возможны только в Photoshop.
Комбинирование CSS-градиентов при помощи background-blend-mode
CSS-градиенты могут использоваться в свойстве background. Такие функции, как linear-gradient(), radial-gradient(), repeating-linear-gradient() и repeating-radial-gradient() имеют широкую поддержку и более строгий, стандартизированный синтаксис в браузерах.
Но свойство background может допускать более одного градиента, отображая их поверх друг друга, если перечислить каждый следующий через запятую. Lea Verou продемонстрировала впечатляющие образцы, которые могут быть созданы с помощью этой техники: от шахматных досок до кирпичей и звезд.
Но сейчас, когда у нас есть свойство background-blend-mode, мы можем создавать все новые градиенты и шаблоны.
Спектральный фон
Давайте наложим три градиента, чтобы сделать фон с почти полным спектром цветов, который можно отобразить на мониторе.
.spectrum-background { background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent); background-blend-mode: screen; } 
Этот эффект ранее был возможен только в виде картинки, занимавшей десятки килобайт. Но мы только что воспроизвели его с помощью CSS размером менее 200 байт, не говоря уже об экономии HTTP-запроса.
Клетчатый фон
Мы также можем создавать интересные шаблоны, имитирующие клетчатый плед, с помощью градиента и background-blend-mode.
.plaid-background { background: repeating-linear-gradient( -45deg, transparent 0, transparent 25%, dodgerblue 0, dodgerblue 50% ), repeating-linear-gradient( 45deg, transparent 0, transparent 25%, tomato 0, tomato 50% ), repeating-linear-gradient( transparent 0, transparent 25%, gold 0, gold 50% ), white; background-blend-mode: multiply; background-size: 100px 100px; } 
Фон в кружочек
Вот еще один фон, теперь с использованием радиального градиента:
.circles-background { background: radial-gradient( khaki 40px, transparent 0, transparent 100% ), radial-gradient( skyblue 40px, transparent 0, transparent 100% ), radial-gradient( pink 40px, transparent 0, transparent 100% ), snow; background-blend-mode: multiply; background-size: 100px 100px; background-position: 0 0, 33px 33px, -33px -33px; } 
Больше фоновых рисунков
С помощью Yoksel и Una Kravets я подготовил коллекцию из 24 шаблонов, сделанных с помощью смешивания, которые сделают ваш сайт быстрее и привлекательнее.
Фотоэффекты с помощью background-blend-mode
Хотя background-image позволяет установить несколько градиентов для элемента, фокус в том, что таким же образом мы можем установить несколько фоновых изображений с использованием конструкции url(). Когда мы совмещаем это с background-blend-mode и свойствами вроде filter, может получиться что-нибудь действительно интересное.
Эффект карандашного наброска
Мы можем использовать CSS, чтобы сделать фотографию слева похожей на карандашный набросок. Нам не понадобятся Photoshop, HTML5 canvas, WebGL, библиотеки Javascript. Пять свойств CSS – все, что потребуется.
Хотя мы можем использовать другие блочные элементы, такие как body, section, figure, для начала используем такой HTML:
<div class=”pencil-effect”></div> Давайте начнем моделирование. Заменим chapel.jpg на url картинки, которую вы используете. Мы дважды установим фоновое изображение и сохраним его фоновый размер.
.pencil-effect { background: url(chapel.jpg), url(chapel.jpg); background-size: cover; }Ниже на первом квадрате результат нашего первого шага:
Теперь добавим режим смешивания:
background-blend-mode: difference;О нет, куда все делось? У нас получился совершенно черный квадрат. Режим вычитания для смешивания берет два фона и отнимает пиксель за пикселем более темный цвет одного фона из более светлого цвета другого фона.
Если вы запутались в том, что происходит, давайте посмотрим, что случится, когда мы немного сместим два фона с помощью background-position и calc().
background-position: calc(50% — 1px) calc(50% — 1px), calc(50% + 1px) calc(50% + 1px); 
Используя запятую, мы устанавливаем две позиции фона, каждая из которых соответствует одной копии фонового изображения. Первое изображение мы перемещаемся от центра по оси Х влево на один пиксель и от центра по оси Y вверх на пиксель. Для второй копии фонового изображения мы делаем прямо противоположное, перемещая ее вниз и вправо.
У нас получились два фоновых изображения, которые слегка смещены, но вся картина по-прежнему центрирована в нашем элементе. Теперь, когда режим вычитания обнаруживает разницу между двумя изображениями, видны края на фотографии. Здорово, не так ли?
Наконец, мы будем использовать свойство filter, чтобы инвертировать фотографию и перевести ее в оттенки серого.
filter: brightness(3) invert(1) grayscale(1);Для этой конкретной фотографии мы также повысим яркость, которая имеет вторичный эффект относительно повышения контрастности линий.
Вот окончательный фрагмент CSS для этого эффекта:
.pencil-effect { background: url(photo.jpg), url(photo.jpg); background-size: cover; background-blend-mode: difference; background-position: calc(50% — 1px) calc(50% — 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(3) invert(1) grayscale(1); } 
Эффект школьной доски
Мы можем воссоздать эффект школьной доски, выполнив шаги для эффекта карандашного наброска и исключив функцию invert(1) на заключительном этапе.
Эффект прибора ночного видения
Давайте воссоздадим еще один эффект с помощью возможностей смешивания CSS и сделаем фотографию, выглядящую так, как будто мы сделали ее через объектив прибора ночного видения.
Есть три части нашего фона, которые мы будем смешивать вместе с помощью режима overlay. Этот режим смешивания осветляет и затемняет фон, и работает как комбинация двух других режимов смешивания – multiply и screen.
Сначала мы установим фоновое изображение, на этот раз одно.
background: url(moose.jpg); background-size: cover; background-position: center; 
Теперь добавим градиент и свойство смешивания фоновых слоев. Здесь мы используем радиальный градиент от полупрозрачного лаймового до черного.
background: url(moose.jpg), radial-gradient( rgba(0,255,0,.8), black ); background-blend-mode: overlay; 
Не так уж плохо, можно оставить все так. Но у меня есть еще одна идея, которая может сделать эффект более аутентичным — добавить на фон несколько фальшивых линий развертки с повторяющимся градиентом фона.
background: url(moose.jpg), radial-gradient( rgba(0,255,0,.8), black ), repeating-linear-gradient( transparent 0, rgba(0,0,0,.2) 3px, transparent 6px ); 
И, в итоге, вот полный фрагмент CSS, используемый для этого эффекта:
.night-vision-effect { background: url(moose.jpg), radial-gradient( rgba(0,255,0,.8), black ), repeating-linear-gradient( transparent 0, rgba(0,0,0,.2) 3px, transparent 6px ); background-blend-mode: overlay; background-size: cover; }
Больше фотоэффектов
Я сделал галерею из 20 картинок с CSS-эффектами, которые вы можете использовать для своих сайтов.
Поддержка браузера и постепенная деградация
Хорошие новости в том, что свойство background-blend-mode полностью поддерживается в Firefox, Chrome и Opera.
Отчасти хорошей новостью является то, что она имеет достаточную поддержку в Safari в части тех эффектов, которые мы рассмотрели здесь, но Safari в настоящее время не поддерживает saturation, hue, color и luminosity.
Плохая новость заключается в том, что Internet Explorer и IE Edge вообще не поддерживают свойства смешивания CSS.
Это значит, что мы должны учитывать наличие браузеров, до сих пор не поддерживающих background-blend-mode. Замечательное правило CSS @supports делает это довольно простым. Вот два примера.
Для первого примера мы возьмем наш спектральный фоновый градиент и предусмотрим резервные возможности на случай, если функция background-blend-mode не поддерживается. Мы используем для нашего примера background: gray в качестве резерва, но в этом месте можно использовать любой CSS.
.spectrum-background { background: gray; @supports (background-blend-mode: screen) { background: linear-gradient(red, transparent), linear-gradient(to top left, lime, transparent), linear-gradient(to top right, blue, transparent); background-blend-mode: screen; } } А здесь эффект карандашного наброска с запасным вариантом. Мы проверяем два важных свойства, которые требуются для создания эффекта: filter и background-blend-mode. Если браузер пользователя не поддерживает их (или если браузер не поддерживает CSS @supports), мы вернемся к оригинальной фотографии.
.pencil-effect { background-image: url(photo.jpg); background-size: cover; @supports (background-blend-mode: difference) and (filter: invert(1)) { background-image: url(photo.jpg), url(photo.jpg); background-blend-mode: difference; background-position: calc(50% — 1px) calc(50% — 1px), calc(50% + 1px) calc(50% + 1px); filter: brightness(3) invert(1) grayscale(1); } }
Источники:
Blending Modes Demystified by Justin McDowell
Basics of CSS Blend Modes by Chris Coyier
CSS3 Patterns Gallery by Lea Verou
Una Kravets’ 6-part CSS Image Effects Series
Can I use… Support for background-blend-mode
Image Effects with CSS by Bennett Feely
New CSS Gradient possibilities with the background-blend-mode property by Bennett Feely
Experimental Polyfill for background-blend-mode by Rik Cabanier
Compositing and Blending Level 1 Specification by the W3C
Заглядывайте на VPS.today — сайт для поиска виртуальных серверов. 1435 тарифов от 130 хостеров, удобный интерфейс и большое число критериев для поиска наиболее подходящего виртуального сервера.
ссылка на оригинал статьи https://habr.com/post/423115/
Добавить комментарий