Режимы наложения в CSS

Презентация в лучшем виде:

+ флаг: chrome://flags/#enable-experimental-web-platform-features
+ флаг: opera://flags/#enable-experimental-web-platform-features

Так себе вид:

и

background-blend-mode

mix-blend-mode

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn

hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Градиенты

Варианты применения

Эффекты по наведению

Виньетирование

Цветовая схема

My Blog

15.06.2014

Rainy day

Nunc eu accumsan lorem, nec eleifend massa. Integer lobortis bibendum neque a pellentesque. Nunc ullamcorper hendrerit mauris, id gravida turpis facilisis in.

Donec non diam eleifend, lobortis urna id, vestibulum erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

0 comments

Обрезание фона

PNG

JPEG, 20 Kb
PNG-24, 117 Kb
PNG-8, 28 Kb

SVG-маски

JPEG, 20 Kb
PNG, 4 Kb
JPEG + PNG, 24 Kb

Режимы наложения

Dragons and Knights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

Dragons and Knights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

Dragons and Knights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

In hac habitasse platea dictumst. Etiam et tortor pulvinar dui eleifend egestas. Nullam venenatis risus massa, at faucibus risus ullamcorper id.

Текст, который видно всегда

1
2
3
4
5
6

Спецэффекты

Crazy Birthday!

CSS

background-blend-mode

            background-color: teal;
            background-image: url(kitten.jpeg);
            background-blend-mode: luminosity;

            background-color: #FFF;
            background-image: url(trees.jpeg),
    radial-gradient(circle, white 30%, transparent 75%),
    radial-gradient(circle, white 30%, transparent 75%),
    url(kitten.jpeg);
            background-blend-mode: overlay, color-dodge, color-dodge, luminosity;

Порядок слоев

Картинка над цветом

Цвет над картинкой

mix-blend-mode

IMG {
            mix-blend-mode: multiply; 
            }

.entry { 
            mix-blend-mode: overlay; 
            }

Sea

Aurora Borealis Text

Isolation

.block { 
            isolation: isolate; 
            }

.block { 
            opacity: .5; /* или */
            transform: translateZ(0); /* или */
            mask: url(#mask); /* или */
            filter: blur();
            }

isolation: auto;

opacity: .99;

Поддержка браузерами

background-blend-mode
mix-blend-mode

Проблемы

mix-blend-mode + background-blend-mode могут уронить Firefox
в Safari не работают режимы hue, saturation, color, luminosity

Включить в Chrome:
chrome://flags/#enable-experimental-web-platform-features
Включить в Opera:
opera://flags/#enable-experimental-web-platform-features
Узнать актуальную поддержку браузерами:
caniuse.com/#search=blend

Режимы наложения в IE:
миф или реальность?

SVG

<svg class="svg-defs">
    <filter id="multiply" x="0" y="0">
        <feImage id="bgimage" result="bgimage"
            x="0" y="0" width="300" height="206"
            xlink:href="background-image.png"
        </feImage>
        <feTile in="bgimage"></feTile>
        <feBlend mode="multiply" in2="SourceGraphic"/>
    </filter>
</svg>

<svg class="pic" viewBox="0 0 300 161">
    <image xlink:href="myimage.jpg"
        width="100%" height="100%"
        filter="url(#multiply)"
</svg>

Dragons and Knights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum.

Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus.

In hac habitasse platea dictumst. Etiam et tortor pulvinar dui eleifend egestas. Nullam venenatis risus massa, at faucibus risus ullamcorper id.

Проблемы

IE9 не поддерживает фильтры
Фон тянется вместе с картинкой
При масштабировании появляются полосы между плитками фона
В разных браузерах доступны разные режимы (демо для тестов)

Преимущества

IE10+
Поддержка браузерами лучше, чем у CSS-свойств

Послесловие

Полезные ссылки

Спецификация (англ.)
Getting to Know CSS Blend Modes (англ.)
Сборник экспериментов от Adobe
Мои эксперименты
Background-blend-mode (рус.)
Как сделать Instagram в браузере (рус., презентация)

Режимы наложения в CSS

Презентация в лучшем виде:

Так себе вид:

background-blend-mode

mix-blend-mode

Градиенты

Варианты применения

Эффекты по наведению

Виньетирование

Цветовая схема

My Blog

Rainy day

Обрезание фона

PNG

SVG-маски

Режимы наложения

Dragons and Knights

Dragons and Knights

Dragons and Knights

Текст, который видно всегда

Спецэффекты

Crazy Birthday!

CSS

background-blend-mode

Порядок слоев

mix-blend-mode

Sea

Aurora Borealis Text

Isolation

Поддержка браузерами

Проблемы

Режимы наложения в IE:миф или реальность?

SVG

Dragons and Knights

Проблемы

Преимущества

Послесловие

Полезные ссылки

Бухвалова ЮлияLivejournal

Режимы наложения в IE:
миф или реальность?