Режим смешивания в 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Лично я люблю землянику со сливками, но рыба почему-то предпочитает червяков. Вот почему, когда я иду на рыбалку, я думаю не о том, что люблю я, а о том, что любит рыба. (Дейл Карнеги / БИЗНЕС) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp