Режим смешивания в CSS
Режим смешивания, которые вы встречали в Photoshop-е доступны в CSS через свойства blend-mode и background-blend-mode. Значения этих свойств точно такие же, как в нашем любимом графическом редакторе: lighten, multiply, hard-light и так далее. В этой статье рассмотрим, как применить их через CSS.
Данные CSS свойства очень новы - поддерживается только в Chrome Canary, экспериментальном браузере от Adobe, а так же в сборках Webkit Nightly. Как и в Photoshop-е, так и в CSS, элементы к которым применяется эффект, должны быть распределены по слоям. В HTML это можно реализовать за счёт иерархии элементов. Стандартный режим смешивания, “Normal”, применяется по умолчанию (в CSS, blend-mode: normal).
Вообще говоря, вы уже наверняка использовали какие-то свойства, которые изменяют состояния пикселей. К примеру, opacity, но сейчас мы будем говорить только о том, что касается режимов смешивания.
Не все фотошопные режимы смешивания доступны нам в CSS, а только multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference и exclusion. Глядя на этот список, думаю, что и этого вполне хватит.
Режим Screen
Игнорирует чёрный цвет, делает остальные цвета светлее. Представьте два проектора светящие на изображение. Темнее изображению не стать, а наоборот, светлые тона проявляются лучше.
Режим Multiply
Наоборот: игнорирует белый цвет, остальное затемняет. Как будто наложить два слайда друг на друга. Светлые оттенки остаются практически невидимы, а тёмные подчёркиваются.
Режим Overlay
Балансировка между двумя предыдущими режимами: игнорирует обычные тона, делая светлые стороны изображения ярче, тёмные, темнее. Другими словами, усиливает контраст.
Давайте расположим светлые и тёмные элементы на одном и том же фоне. В HTML и CSS это будет выглядеть так:
body { background: #c27a0e; margin: 2.5%; } div { width: 25%; height: 25vw; margin: 4%; float: left; } <div style=background:black></div> <div style=background:grey></div> <div style=background:white></div>
К данному изображению мы будем применять разные режимы смешивания. Помните, что префикс -webkit-blend-mode, доступен только в перечисленных браузерах.
Режим смешивания Screen
В фотошопе для применения режима смешивания, нужно просто выставить его определённому слою. В CSS всё намного проще:
div { -webkit-blend-mode: screen; }
В результате, вы видите, что чёрный квадрат исчез вовсе, серый посветлел, а белый остался как есть.
Режим Multiply
Применяем режим смешивания Multiply к тому же изображению:
Обратный эффект: чётный остался чёрным, серый стал темнее, белый вовсе исчез.
Режим Overlay
Серый исчез, а белый и чёрный подстроились под цвет фона, увеличив контраст.
Более практичное применение
На самом деле, применение режимов смешивания в браузере открывает огромное число возможностей. К примеру, мы можем применить эффект к фотографиям:
body { background: #f00; } img { -webkit-blend-mode: multiply; } <img src=future-girl.jpg alt="Photograph of girl in a futuristic hood">
Это доказывает, что мы можем контролировать способ отображения изображения через CSS, без деструктивного преобразования исходного файла.
Вот более продвинутый пример применения данных фишек:
html, body { min-height: 100%; } body { background: url(future-girl.jpg), url(circuit-board.jpg); background-repeat: repeat-x, no-repeat; background-size: auto, cover; background-position: center bottom, left top; background-blend-mode: multiply, normal; } h1 { color: white; text-transform: uppercase; font-size: 5rem; text-align: center; font-family: Futura, sans-serif; text-shadow: 0 0 5px rgba(0,0,0,0.3); }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/6nl5rx_yCVs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Неудача — это не единичное внезапное событие. Ваш провал не возникает внезапно. Напротив, неудача появляется, когда вы совершаете одни и те же ошибки изо дня в день. Джим Рон |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.