Режим смешивания в 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Режим смешивания в CSS | | 2013-07-04 05:50:35 | | Статьи Web-мастеру | | Режим смешивания, которые вы встречали в Photoshop-е доступны в CSS через свойства blend-mode и background-blend-mode. Значения этих свойств точно такие же, как в нашем любимом графическом редакторе: | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: