Режимы наложения слоёв в Web

    Привет, Хабр!
    Одна из главных причин тяжёлых увечий дизайнеров претензий к неопытным дизайнерам от верстальщиков, при получении от них PSD-макетов — это наличие слоёв с заданными режимами смешивания, отличными от normal. Вполне возможно, что скоро это уйдёт в прошлое!
    Речь пойдёт о реализации спецификации "Compositing and Blending Level 1" в современных браузерах.


    Что это и для чего?

    Данный стандарт описывает правила наложения слоёв друг на друга, аналогично тому, как это делается в Photoshop. Например, в режиме multiply итоговый цвет пикселя будет равен произведению цветов двух слоёв. Благодаря этому, можно добиться различных эффектов, таких как:

    1) Фотоэффекты, такие как обесцвечивание картинки, сепия, наложение цвета. Например, достаточно будет использовать только одну цветную картинку, чтобы получить плавную анимацию от обесцвеченной к цветной при наведении:
    (по клику — живой пример на jsfiddle)
     

    2) Часто дизайнеры ленятся вырезать фон из картинки и используют наложение картинки без прозрачности на слой так, что фоновый чёрный/белый цвет будет в данном режиме преобразуются в прозрачный (режим screen/multiply):

    (на картинке внизу показал кусочек накладываемого изображения «как есть»)

    3) Иногда можно использовать данную технологию для реализации эффектов с текстом, например, в логотипах:


    4) Для создания различных эффектов-красивостей:
    Демо, автор Justin Windle, http://soulwire.co.uk



    Список режимов

    Для примера будем накладывать тигра на такую картинку в разных режимах:

    normal
    multiply
    screen
    overlay
    darken
    lighten
    color-dodge
    color-burn
    hard-light
    soft-light
    difference
    exclusion
    hue*
    saturation*
    color*
    luminosity*
    * здесь я взял раскрашенную в красные оттенки картинку, для демонстрации эффекта


    Технологии применения и поддержка браузерами

    По спецификации, применять режимы наложения можно в четырёх случаях:

    1) Для фонового изображения в CSS
    background-blend-mode: <blend-mode>;
    Поддерживают: Chrome 35+, Firefox 30+ beta (войдёт ли в релиз этот функционал, ещё вопрос, т. к. скорее всего уже переносили «приземление» этого функционала).

    2) Для HTML-элементов
    mix-blend-mode: <blend-mode>;
    Поддерживают: пока нет, но активно идёт разработка по реализации.

    3) Для SVG
    <feBlend mode="<blend-mode>">
    Поддерживают: Chrome 35+, IE 10+ (с отличиями)

    4) Для Canvas
    .globalCompositeOperation = <blend-mode> | <composite-mode>*;
    * доступны дополнительные режимы
    Поддерживают: Chrome 29+, Firefox 24+, Opera 17+, Safari 6.1+

    Узнать подробнее о поддержке браузерами данного стандарта можно в таблице от adobe.
    Поделиться публикацией

    Комментарии 20

      +1
      Наконец-то!
        +3
        Для canvas смысла в режимах наложения особого нет, т.к. там можно напрямую оперировать каналами rgba. Можно вообще любой фильтр описать. Не понятно поддерживаются ли режимы смешивания для текста, а именно для теней.
          0
          Если речь о обычном html-тексте, то для этого нужна поддержка как раз mix-blend-mode, которой пока нет по-умолчанию. Хотя в about:config (browser://flags) в некоторых случаях можно включить экспериментальную поддержку.
            +1
            Это очень важная и нужная фича для бэкграудов и картинок, канвас и без этого может все, но он для другого.
              0
              Ну картинки можно с успехом заменить на canvas, с бекграундами такого не сделаешь конечно.
              +1
              можно. но для динамически изменяющегося изображения итератор по даже 800х600 = 480к проходов без распарралеливания физически не может уложиться в 1000мс / 60гц = 16 мс.
              поверьте человеку, который в свое время исхитрился сделать эмуляцию альфа-слоя. Именно тогда я узнал, что while (i--) {} правда работает куда быстрее чем for(){}, а эти побитовые сдвиги со стрелочками — прелесть какие быстрые.
                0
                Это если юзать 2D-контекст, если подключить к этому делу WebGL, то всё сильно лучше становится.
              +5
              Предчувствую попоболь и еще большую войну с дизайнерами :(
              А еще мне нравится фраза от дизайнеров «Я на хабре читал, что так можно!11». И не объяснишь, что «в ie не работает».
                +3
                Зачем это всё в вебе?

                Сейчас популярен деффект инстаграма, виньетирование и прочее ненужное, при чем и не только в вебе, но и у фотографов. Что же нас ждет после повсеместного внедрения? Glass button и длинные тени сменятся обезображиванием фотографий повсеместно, аля инстаграм?

                Для применения в дизайне сайтов — тоже не оправдано. Зачем тратить лишние ресурсы, пусть и пользователя, для искажения графики, если можно сразу сохранить графику как надо.

                ЗЫ Для SVG и canvas — поддерживаю :D
                  +1
                  Я бы не стал так категорично отрицать необходимость этой возможности. По меньшей мере три проекта, которые я делал, использовали :hover эффект, когда черно-белая картинка при наведении становилась цветной. Приходилось для этого генерировать черно-белую на сервере, а пользователю прдгружать две. С данной техникой это все упрощается в разы.
                  Кроме того, часто бывает нужно покрутить оттенок для разного типа кнопок, сделанных сложной картинкой. Теперь это можно будет сделать двумя картинками — самой кнопкой и маской, а оттенок регулировать с помощью opacity.
                    0
                    А я не понимаю.

                    Ну вот вводили фильтры, которыми можно было сделать чуть светлее, темнее и т.д.
                    Так же были svg фильтры, которыми можно сделать серым картинку (не кроссбраузерно).
                    Есть канвас — которым можно сделать что угодно с картинкой и вставить куда угодно (через тот же base64).

                    А это зачем? Даже приведенный вами пример из жизни — это лишь подтверждает мои слова «обезображиванием фотографий».

                    Кроме того, часто бывает нужно покрутить оттенок для разного типа кнопок, сделанных сложной картинкой

                    Извините, а не пора ли тогда уже перейти на SVG, где цвет меняется парой цифр? Или если для SVG это сложно, то мне кажется такое надо делать или заранее или на стороне сервера. Зачем нагружать этим клиент?

                    Я люблю CSS3 и HTML5 и его возможности, но это считаю ненужное введение.
                      +1
                      CSS-фильтры это конечно хорошо, но они действуют на все пиксели одновременно, тогда как с режимами наложения можно применять эффект по маске.
                      Давайте рассмотрим такой пример. Есть сайт, который предлагает пользователям заказать индивидуальный чехол с надписью. Чехол двухцветный и имеет несколько вариантов текстур. На сайте должно быть два ползунка меняющее эти два цвета по желанию пользователя, и поля для ввода текста, который накладывается сверху на текстуру чехла. Ваши действия?
                      Да, наверняка можно это сделать через Canvas или SVG, но они предполагают большее количество кода на JS, тогда как с CSS это сделать проще.
                      Каждой технологи, я считаю, можно найти свою область применения.
                  +2
                  Это что значит, из photoshopa можно будет валидную верстку экспортировать?)
                    +3
                    Ну что уж мелочиться, сразу готовый сайт выдавать, регистрировать за вас домен, и раскручивать до топ-10)
                      +1
                      Программировать я люблю, а вот возиться с тенями, фонами, градиентами и т.д. совсем не люблю…
                    +1
                    Теперь нельзя будет ругаться с дизайнером по поводу не скинутых в normal режимов наложения слоев в макете…
                      +1
                      Зачем ругаться, попросите его все нужные группы объектов в макете конвертировать в смарт-объекты. Сразу все косяки с наложением на фон вылезут.
                      0
                      Поддерживают:… Firefox 30+ beta

                      У меня на канале обновления Nightly Firefox 29a нормально отображал все примеры. Так что наверное стоит написать, что 29a+. Сейчас, правда, когда его запустил, он обновился до версии 32a…
                        0
                        Скорее всего данный функционал уже планировался в 29 версии, но в финальный релиз они его не включили, поэтому пока висит на канале beta и ждёт своего часа, и не известно, включат ли в следующий релиз.
                        • НЛО прилетело и опубликовало эту надпись здесь

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.