Веб-графіка все більше йде від перетворень з втратою якості. Ми не хочемо, щоб зміни в дизайні або графіку шкодили вихідного матеріалу. Таким чином, якщо нам знадобиться відкотити зміни або поміняти щось інше, оригінал збережеться.
Що таке режими накладення
З технічної точки зору, накладення кольору застосовує математичні операції до колірних компонентів кожного пікселя зображення. Так-так, в основі всього цього добра для творчості лежить математика! Не хвилюйтеся, заучувати формули для використання режимів накладання не доведеться, але, тим не менш, базове розуміння механізму роботи накладення знадобиться.
W3C рекомендує 15 нових режимів накладання. Всілякої інформації про роботу різних режимах накладення повно. і єдиного правильного варіанту використання кожного з них немає. Давайте докладніше розглянемо тільки декілька найбільш корисних режимів. Ось для чого найчастіше я використовую режими накладення.
Ефект прозорості з multiply (Множення)
Почнемо з множення. Математичну формулу для цього режиму можна змалювати таку картину:
От і все. Вона буквально перемножує колір верхнього шару (а) з нижньому шаром (b), щоб отримати підсумковий колір (х), звідси і назва «множення»
Але як перемножуються кольору? Працює це так: на екранах комп'ютерів кольору будуються за допомогою червоного, зеленого і синього каналів. Кожен з каналів отримує значення яскравості - число, яке визначає рівень, як яскраво світитиме відповідний підсвічений. Тепер, отримавши числа, можна вдатися до математики!
При використанні режиму накладення multiply (Множення), комп'ютер бере значення яскравості червоного каналу для обох шарів, призводить їх до масштабу від 0 до 1 і перемножує їх. Потім він проробляє те ж саме з зеленим і синім каналами. Після отримання всіх результатів він з'єднує ці канали в підсумковий колір.
Це звичайно здорово, але в чому практичний ефект?
Два шару без накладення.
Два шару із застосуванням режиму накладення multiply
Після перемноження чорні пікселі на верхньому шарі відображаються у всій красі: чорними. А білих пікселів взагалі не видно. Вони повністю прозорі. Проміжні відтінки сірого по краях букв затемнюють шар нижче. І ми отримуємо приємні рівні кордону з мінімумом зусиль. Це як якщо б графіка була з прозорим фоном спочатку.
Такий трюк працює тільки з чорними фігурами. Якщо у джерела є колір, то це в якійсь мірі забарвить результат. Однак, якщо фігури білі, то можна використовувати режим накладення screen (Екран).
Пил і подряпини з режимом screen (Екран)
Функціональна протилежність multiply - «Екран». Хвилиночку, якщо це протилежність режиму «Множення», чому вона не називається «Розподіл»? І знову відповідь лежить в математиці:
Це не названо «Розподілом», оскільки ми фактично робимо ще більше множення! Тут ми перемножуємо Інвертований значення a на Інвертований b. а потім інвертуємо результат. В результаті білі пікселі верхненго шару стають повністю непрозорими, а чорні - прозорими. Кожен проміжний відтінок тепер освітлює шар нижче.
У наступному прикладі я хотів, щоб фотографія виглядала як стара, тому взяв скан пилу і подряпин, і наклав його за допомогою «Екрану». Також я вирішив використовувати саме цей режим накладення, щоб знебарвити фото за допомогою блідо-лілового кольору для ефекту.
Накладення із шаром пилу і подряпин (можна ознайомитися на «Spoon Graphics») і шаром блідо-лілового кольору.
Зображення з двома шарами, де до верхнього шару застосований режим накладення screen
До речі, в деяких додатках є режим поділу, але його немає в специфікації W3C. (Я не особливо засмучений з цього приводу, оскільки мені ніколи не був потрібен цей режим.)
Додавання кольору за допомогою hue і color
У всіх режимів накладення є можливість зрушувати колір графіки, але дві з них особливо корисні для додавання кольору: hue (Відтінок) і режим з дуже підходящою назвою color (Колір).
Цей режим накладення бере компонент відтінку з перекриває шару і застосовує його до квітів нижче, не зачіпаючи насиченість і яскравість. Я можу накладати шари з явно різними кольорами, отримуючи при цьому той же результат, поки їх значення відтінку збігаються. У разі зображення нижче, всім трьом відтінкам коричневого задано значення 26 градусів, але фото виглядає однаково, незалежно від того, який відтінок накладається.
Цей режим накладення впливає і на відтінок, і на насиченість вихідних пікселів, але ігнорує яскравість. Накладений поверх червонувато-коричневий шар не тільки зробить вихідні пікселі червонувато-коричневими, як це було у випадку з режимом відтінку, але також додасть їм таку ж насиченість, що зазвичай дає більше виразного ефекту тонування, ніж просто відтінок.
Накладений поверх червонувато-коричневий шар не тільки зробить вихідні пікселі червонувато-коричневими, як це було у випадку з режимом hue. але також додасть їм таку ж насиченість.
Того ж ефекту можна досягти, якщо змінити порядок шарів, помістивши колір під фотографію, і накласти фотографію за допомогою режиму накладення luminosity (Яскравість).
кросбраузерності накладення
З цими режимами накладення тепер можна на одному CSS робити ефекти накладення не гірше ніж в Photoshop. Але навіть хоча всі браузери використовують однакову математику, все одно результати іноді помітно відрізняються.
Крім того, справа не тільки в несумісних браузерах. Люди несумісні! Взяти, наприклад, мільйони людей з дальтонізм. Ці люди, ймовірно, бачать ваші проекти не так, як ви розраховували. Як завжди, тестируйте свої творіння в відповідних браузерах, перевіряйте доступність і не сподівайтеся, що ваші проекти виглядають скрізь однаково!
І звичайно ж тестируйте на реальних пристроях, щоб розуміти, як апаратні обмеження (маленька оперативна пам'ять, наприклад) вплинуть на сайт. З деякими режимами накладення прокрутка може гальмувати. Якщо вам потрібна ідеальна плавність з повноцінними 60 кадрами в секунду, деякі варіанти можуть вам не підійти.
Застосування режимів накладення
За режими накладення в CSS відповідає пара різних властивостей: background-blend-mode і mix-blend-mode. Також може бути корисною і третя властивість: isolation.
Накладення фонових зображень
Спробуємо накласти пил і подряпини на наше фото. (Зауважте, що в прикладах показаний тільки код, безпосередньо відноситься до справи)
Часом вам може знадобитися просто накласти колір. На жаль, CSS-властивість background-color обмежує нас одним кольором, і це завжди нижній шар, незалежно від того, оголошено чи background-color на початку або в кінці списку. Специфікація W3C пропонує нотацію image (), що дозволяє розробнику «використовувати суцільний колір як зображення», але необхідної підтримки браузерами поки немає. На щастя, оскільки градієнти в CSS - це різновид картинок, можна хитрістю змусити браузер згенерувати суцільний колір, задавши перехід з кольору в цей же колір.
Тепер освітлити зображення, як ми робили раніше, і надамо йому відтінок коричневого кольору (сепія).
Накладення HTML-елементів
mix-blend-mode змішує накладаються один на одного HTML-елементи, тому елементи в перекривають шарах змішуються з нижніми шарами. Давайте повернемо заголовок назад в зображення і «розчинний» небажаний білий фон за допомогою multiply. Я також зробив зображення злегка прозорим, надавши йому приємний ефект штампа на зображенні.
Ось новий приклад використання mix-blend-mode для змішування декількох елементів.
Використання mix-blend-mode для змішування декількох елементів.
Якщо потрібно, щоб елемент в нижньому шарі змішувався з конкретним шаром вище, можна відокремити його за допомогою третьої властивості: isolation. Це корисно, коли потрібно накласти один елемент на інший. не чіпаючи базовий шар. У властивості mix-blend-mode кожного з цих дисків коштує значення screen. яке наказує їм створювати нові кольори в місцях їх перетину. Однак, нам потрібно ізолювати зображення гори, не даючи йому змішуватися з іншими квітами.
Використання властивості isolation для запобігання елемента в нижньому шарі від змішування з шарами вище.
Коли я вибудовував це за допомогою HTML і CSS, то очікував побачити наступне:
Але в результаті накладення застосовується до контейнера разом з усім його вмістом, як показано нижче.
Як і з 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, роблячи це гнучко і без шкоди для вихідного матеріалу. Це відмінне доповнення в браузері і в наших руках.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...