Про режими накладання в CSS без таємниць

1. Що таке режими накладення
2. Ефект прозорості з multiply (Множення)
3. Пил і подряпини з режимом screen (Екран)
4. Додавання кольору за допомогою hue і color
5. hue
7. кросбраузерності накладення
8. Застосування режимів накладення
9. Накладення фонових зображень
11. підтримка браузерами

Переклад статті Blending Modes Demystified із сайту alistapart.com для css-live.ru . Автор - Джастін Макдауел .

Веб-графіка все більше йде від перетворень з втратою якості. Ми не хочемо, щоб зміни в дизайні або графіку шкодили вихідного матеріалу. Таким чином, якщо нам знадобиться відкотити зміни або поміняти щось інше, оригінал збережеться.

Одна з останніх можливостей, до якої дорвалися дизайнери - обробка зображення з режимами накладання. З режимами накладення легко додати колір, текстуру і інші спеціальні ефекти без необхідності колупатися в графічному редакторі. Це економить час, оскільки більше не доводиться заново обробляти графіку вручну при кожній зміні, і та позбавляє від болісної необхідності згадувати точні параметри візуального стандарту, який, можливо, створений пару місяців назад. Замість цього графіку можна акуратно підключати, підтримувати і обробляти лише кількома оголошеннями CSS.

Що таке режими накладення

З технічної точки зору, накладення кольору застосовує математичні операції до колірних компонентів кожного пікселя зображення. Так-так, в основі всього цього добра для творчості лежить математика! Не хвилюйтеся, заучувати формули для використання режимів накладання не доведеться, але, тим не менш, базове розуміння механізму роботи накладення знадобиться.

W3C рекомендує 15 нових режимів накладання . всілякої інформації про роботу різних режимах накладення повно , І єдиного правильного варіанту використання кожного з них немає. Давайте докладніше розглянемо тільки декілька найбільш корисних режимів. Ось для чого найчастіше я використовую режими накладення.

• прозорість
• текстура
• Додавання кольору

Ефект прозорості з multiply (Множення)

Почнемо з множення. Математичну формулу для цього режиму можна змалювати таку картину:

x = a × b

От і все. Вона буквально перемножує колір верхнього шару (а) з нижньому шаром (b), щоб отримати підсумковий колір (х), звідси і назва «множення»

Але як перемножуються кольору? Працює це так: на екранах комп'ютерів кольору будуються за допомогою червоного, зеленого і синього каналів. Кожен з каналів отримує значення яскравості - число, яке визначає рівень, як яскраво світитиме відповідний підсвічений. Тепер, отримавши числа, можна вдатися до математики!

При використанні режиму накладення multiply (Множення), комп'ютер бере значення яскравості червоного каналу для обох шарів, призводить їх до масштабу від 0 до 1 і перемножує їх. Потім він проробляє те ж саме з зеленим і синім каналами. Після отримання всіх результатів він з'єднує ці канали в підсумковий колір.

Це звичайно здорово, але в чому практичний ефект?

Одна з моїх улюблених причин використовувати multiply - можливість швидко впоратися з невдалим вихідним матеріалом. У вас бували випадки, коли ви просили приємну чітку векторну версію клієнтського логотипу, а в підсумку отримували його в JPG разом з білим фоном з бланка, з якого його наспіх відсканували? Замість того, щоб заново перемальовувати логотип вручну або довго мучитися з виділенням «чарівною паличкою» в редакторі, можна скористатися multiply. Ось як це працює:

Два шару без накладення.

Два шару із застосуванням режиму накладення multiply

Після перемноження чорні пікселі на верхньому шарі відображаються у всій красі: чорними. А білих пікселів взагалі не видно. Вони повністю прозорі. Проміжні відтінки сірого по краях букв затемнюють шар нижче. І ми отримуємо приємні рівні кордону з мінімумом зусиль. Це як якщо б графіка була з прозорим фоном спочатку.

Такий трюк працює тільки з чорними фігурами. Якщо у джерела є колір, то це в якійсь мірі забарвить результат. Однак, якщо фігури білі, то можна використовувати режим накладення screen (Екран).

Пил і подряпини з режимом screen (Екран)

Функціональна протилежність multiply - «Екран». Хвилиночку, якщо це протилежність режиму «Множення», чому вона не називається «Розподіл»? І знову відповідь лежить в математиці:

x = 1 - (1 - a) × (1 - b)

Це не названо «Розподілом», оскільки ми фактично робимо ще більше множення! Тут ми перемножуємо Інвертований значення a на Інвертований b, а потім інвертуємо результат. В результаті білі пікселі верхненго шару стають повністю непрозорими, а чорні - прозорими. Кожен проміжний відтінок тепер освітлює шар нижче.

У наступному прикладі я хотів, щоб фотографія виглядала як стара, тому взяв скан пилу і подряпин, і наклав його за допомогою «Екрану». Також я вирішив використовувати саме цей режим накладення, щоб знебарвити фото за допомогою блідо-лілового кольору для ефекту.

Накладення із шаром пилу і подряпин (можна ознайомитися на « Spoon Graphics ») І шаром блідо-лілового кольору.

Зображення з двома шарами, де до верхнього шару застосований режим накладення screen

До речі, в деяких додатках є режим поділу, але його немає в специфікації W3C. (Я не особливо засмучений з цього приводу, оскільки мені ніколи не був потрібен цей режим.)

Додавання кольору за допомогою hue і color

У всіх режимів накладення є можливість зрушувати колір графіки, але дві з них особливо корисні для додавання кольору: hue (Відтінок) і режим з дуже підходящою назвою color (Колір).

hue

Цей режим накладення бере компонент відтінку з перекриває шару і застосовує його до квітів нижче, не зачіпаючи насиченість і яскравість. Я можу накладати шари з явно різними кольорами, отримуючи при цьому той же результат, поки їх значення відтінку збігаються. У разі зображення нижче, всім трьом відтінкам коричневого задано значення 26 градусів, але фото виглядає однаково, незалежно від того, який відтінок накладається.

color

Цей режим накладення впливає і на відтінок, і на насиченість вихідних пікселів, але ігнорує яскравість. Накладений поверх червонувато-коричневий шар не тільки зробить вихідні пікселі червонувато-коричневими, як це було у випадку з режимом відтінку, але також додасть їм таку ж насиченість, що зазвичай дає більше виразного ефекту тонування, ніж просто відтінок.

Накладений поверх червонувато-коричневий шар не тільки зробить вихідні пікселі червонувато-коричневими, як це було у випадку з режимом hue, але також додасть їм таку ж насиченість.

Того ж ефекту можна досягти, якщо змінити порядок шарів, помістивши колір під фотографію, і накласти фотографію за допомогою режиму накладення luminosity (Яскравість).

кросбраузерності накладення

З цими режимами накладення тепер можна на одному CSS робити ефекти накладення не гірше ніж в Photoshop. Але навіть хоча всі браузери використовують однакову математику, все одно результати іноді помітно відрізняються.

Управління кольором - непроста область, і хоча W3C рекомендує за замовчуванням колірний профіль sRGB, підтримка в різних браузерах неоднорідна. Кожен браузер відображає колір по своєму капризу. Наприклад, Chrome відображає картинки в своєму «необробленому» колірному просторі за замовчуванням, якщо в зображенні не вказано колірний профіль. Firefox працює так само, але до того ж у нього є перемикач (прихований в налаштуваннях конфігурації), що дозволяє включити sRGB для зображень без профілю. Тим часом Safari, швидше за все, буде найбільш відповідати Photoshop, оскільки API графіки Apple списаний з мови PostScript від Adobe . Але навіть там є деякі розбіжності.

Крім того, справа не тільки в несумісних браузерах. Люди несумісні! Взяти, наприклад, мільйони людей з дальтонізм. Ці люди, ймовірно, бачать ваші проекти не так, як ви розраховували. Як завжди, тестируйте свої творіння в відповідних браузерах, перевіряйте доступність і не сподівайтеся, що ваші проекти виглядають скрізь однаково!

І звичайно ж тестируйте на реальних пристроях, щоб розуміти, як апаратні обмеження (маленька оперативна пам'ять, наприклад) вплинуть на сайт. З деякими режимами накладення прокрутка може гальмувати. Якщо вам потрібна ідеальна плавність з повноцінними 60 кадрами в секунду, деякі варіанти можуть вам не підійти.

Застосування режимів накладення

За режими накладення в CSS відповідає пара різних властивостей: background-blend-mode і mix-blend-mode. Також може бути корисною і третя властивість: isolation.

Накладення фонових зображень

Накладення background-blend-mode відбувається між шарами оголошення background-image. І оскільки фонові зображення накладаються один на одного, то можна змішувати їх між собою за допомогою режиму накладення.

Спробуємо накласти пил і подряпини на наше фото. (Зауважте, що в прикладах показаний тільки код, безпосередньо відноситься до справи)

<Div class = "background"> ​​</ div> .background {background-image: url ( "dust-and-scratches.jpg"), url ( "mountain.jpg"); background-blend-mode: screen; }

Для кожного оголошення background-image можна застосовувати свій режим накладення. Перераховуйте їх в тому ж порядку, що і ваші фони, розділяючи їх комами. Підсумкове оголошення - нижній шар - автоматично накладається в звичайному режимі, і це не можна змінювати. Якщо використовувати background-color, то це і буде нижній шар.

Часом вам може знадобитися просто накласти колір. На жаль, CSS-властивість background-color обмежує нас одним кольором, і це завжди нижній шар, незалежно від того, оголошено чи background-color на початку або в кінці списку. Специфікація W3C пропонує нотацію image (), що дозволяє розробнику «використовувати суцільний колір як зображення», але необхідної підтримки браузерами поки немає. На щастя, оскільки градієнти в CSS - це різновид картинок, можна хитрістю змусити браузер згенерувати суцільний колір, задавши перехід з кольору в цей же колір.

Тепер освітлити зображення, як ми робили раніше, і надамо йому відтінок коричневого кольору (сепія).

.background {background-image: linear-gradient (hsl (26, 24%, 42%), hsl (26, 24%, 42%)), / * сепія * / linear-gradient (hsl (316, 22%, 37%), hsl (316, 22%, 37%)), / * блідо-ліловий колір * / url ( "dust-and-scratches.jpg"), url ( "mountain.jpg"); background-blend-mode: color, / * сепія * / screen, / * блідо-ліловий колір * / screen; / * Пил і подряпини * /}

Накладення HTML-елементів

mix-blend-mode змішує накладаються один на одного HTML-елементи, тому елементи в перекривають шарах змішуються з нижніми шарами. Давайте повернемо заголовок назад в зображення і «розчинний» небажаний білий фон за допомогою multiply. Я також зробив зображення злегка прозорим, надавши йому приємний ефект штампа на зображенні.

<Div class = "background"> ​​<div class = "text-box"> <h1> <img class = "graphic" alt = "Chamonix Harmony" src = "chamonix-harmony.jpg" /> </ h1> < / div> </ div> .background {background-image: linear-gradient (hsl (26, 24%, 42%), hsl (26, 24%, 42%)), / * сепія * / linear-gradient ( hsl (316, 22%, 37%), hsl (316, 22%, 37%)), / * блідо-ліловий колір * / url ( "dust-and-scratches.jpg"), url ( "mountain.jpg "); background-blend-mode: color, / * сепія * / screen, / * блідо-ліловий колір * / screen; / * Пил і подряпини * /} .graphic {mix-blend-mode: multiply; opacity: 70%; / * Ефект штампа * /}

Ось новий приклад використання mix-blend-mode для змішування декількох елементів.

<Div class = "background"> ​​<div class = "red-disc"> <img alt = "" src = "red-disc.svg" /> </ div> <div class = "green-disc"> < img alt = "" src = "green-disc.svg" /> </ div> <div class = "blue-disc"> <img alt = "" src = "blue-disc.svg" /> </ div > </ div> .red-disc, .green-disc, .blue-disc {mix-blend-mode: screen; }

Використання mix-blend-mode для змішування декількох елементів.

Якщо потрібно, щоб елемент в нижньому шарі змішувався з конкретним шаром вище, можна відокремити його за допомогою третьої властивості: isolation. Це корисно, коли потрібно накласти один елемент на інший, не чіпаючи базовий шар. У властивості mix-blend-mode кожного з цих дисків коштує значення screen, яке наказує їм створювати нові кольори в місцях їх перетину. Однак, нам потрібно ізолювати зображення гори, не даючи йому змішуватися з іншими квітами.

.background {isolation: isolate; }

Використання властивості isolation для запобігання елемента в нижньому шарі від змішування з шарами вище.

Врахуйте, що mix-blend-mode застосовується до елементу і до всіх його нащадкам. Так само, як у opacity був побічний ефект, який робить вміст контейнера прозорим, то ж відбувається і з mix-blend-mode. Зміст і контейнер змішуються.

У наступному прикладі я зайшов в Photoshop і накидав макет реклами вигаданого виробника лижного спорядження, яке назвав Masstif. Спочатку я створив плашку з текстом і логотипом. Потім змішав плашку за допомогою режиму «Освітлення». Це дає чіткий контраст з фоном і дозволяє тексту і графіку виділятися краще.

Коли я вибудовував це за допомогою HTML і CSS, то очікував побачити наступне:

<Div class = "background"> ​​<div class = "ad-contents"> <p> Коли ти знаходишся на вершині світи, <br/> можна йти тільки вниз. </ P> <p> Гледлі. </ P> <img alt = "Masstif" src = "logo.svg" /> </ div> </ div> .background {background-image: url ( "mountain.jpg"); } .Ad-contents {background-color: white; mix-blend-mode: color-dodge; }

Але в результаті накладення застосовується до контейнера разом з усім його вмістом, як показано нижче.

Як і з opacity, проблема з яким в якійсь мірі вирішується завдяки альфа-каналах фону, тут теж ми можемо вирішити проблему з mix-blend-mode, доручивши основну роботу фону. Потрібний ефект може вийти, якщо перетворити малюнок плашки в фон за допомогою background-image, а не робити плашку окремо і накладати її за допомогою mix-blend-mode. Це не панацея на всі випадки, але спробувати варто. Тим більше більше немає способу ізолювати дочірні елементи від їх батьків зі змішуванням.

підтримка браузерами

Режими накладення підтримуються в більшості сучасних браузерів, крім Internet Explorer і Edge. Але не впадайте у відчай, все ці властивості Microsoft внесла в список «на розгляд» для Edge, і цей браузер вже підтримує всі ці режими накладення в SVG, так що є надія на швидку реалізацію. Також не завадить проголосувати за ці властивості на форумі розробників Microsoft Edge «Uservoice» .

І врахуйте, що Safari 9 не підтримує режими накладення hue, saturation, luminosity і color.

Пам'ятайте, що браузери, які не підтримують режими накладення, відобразять ваші проекти не так, як планувалося. Якщо не впевнені, що ваша аудиторія працює з передовими браузерних технологіями, краще не ризикуйте. Запитайте себе, чи припустимі запасні варіанти для частини аудиторії. Якщо немає, то шукайте обхідний шлях.

Незважаючи на ці застереження, режими накладення прекрасно доповнять арсенал інструментів будь-якого розробника. Тепер можна додавати прозорість, насиченість і текстуру за допомогою CSS, роблячи це гнучко і без шкоди для вихідного матеріалу. Це відмінне доповнення в браузері і в наших руках.

PS Це теж може бути цікаво: