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

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

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

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

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

Скопируйте ссылку на флаг в адресную строку браузера, включите флаг и перезапустите браузер.

Так себе вид:

  • и

background-blend-mode

mix-blend-mode

  1. normal
  2. multiply
  3. screen
  4. overlay
  5. darken
  6. lighten
  7. color-dodge
  8. color-burn
  1. hard-light
  2. soft-light
  3. difference
  4. exclusion
  5. hue
  6. saturation
  7. color
  8. luminosity

Градиенты

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

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

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

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

My Blog

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

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.

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.

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.

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.

Спецэффекты

Crazy Birthday!

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

  • 1

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

Isolation

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

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

Режимы наложения в 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.

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.

Послесловие

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

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

Онлайн: yoksel.github.io/blend-modes-26okt2014/

Powered by Shower