Режими накладення шарів в 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 .
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.