Керівництво для роботи з кольором у веб-розробці. Частина друга. Генерація кольору і різні ефекти


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

Розповідає Сара Драснер


Ми продовжуємо розбирати різні прийоми при роботі з кольором у веб-розробці. Дивіться також першу частину про генерацію кольору і різні ефекти.

 

Згенерований колір

Є декілька способів зібрати багато приголомшливих колірних ефектів в одному місці.

Якщо Ви залишаєтеся у рамках вивченого в попередній частині, то для отримання кольорів Ви можете використати або цикли for у Sass (чи іншому препроцесорі CSS) або JavaScript, або Math.Random () і Math.floor (). Math.floor () чи Math.ceil () потрібні, тому що коли ми не повертаємо ціле число, ми отримуємо помилку, а не колір.

Правило: не варто змінювати всі три величини одночасно. Зазвичай одну величину я змінюю сильно, другу – трохи, а третю не чіпаю зовсім. Зокрема, для цього чудово підійде HSL, адже якщо пройтися циклом за величиною тону від 0 до 360, то вийде повне коло. Крім того, браузери здатні обробляти і такі значення, як -480 або 600.

Sass

@mixin colors ($max, $color - frequency) { $color: 300/$max; @for $i from 1 through $max { .s#{$i} { border: 1px solid hsl (($i - 10)*($color*1.25)40%); } }} .demo { @include colors (20,2);}

Даний код я використала в цій демці:

І в цій також, хоча і з іншою областю (гортайте вниз дуже швидко):

У демці нижче я використала Math.random () у межах значень RGB для отримання великої кількості кольорів в одній області. Це VR-демка, створена за допомогою React. Так, можна було б задати колір циклами, але я хотіла зробити його рандомним, щоб виділити рух.

Натисніть на картинку для перегляду демки.

JavaScript

class App extends React.Component { render (){ const items =[], amt1 = 5, amt2 = 7; for (let i = 0; i < 30; i++) { let rando = Math.floor (Math.random () *  (amt2 - 0 + 1))  + 0, addColor1 = parseInt (rando * i), addColor2 = 255 - parseInt (7 * i), updateColor = 'rgb (200, ${addColor1}, ${addColor2}) ';
items.push ( ... ); } return (  ... {items}  ); }}

GreenSock створив інструмент для анімації відносних колірних величин, що дуже корисно, оскільки Ви можете взяти декілька елементів і анімувати їх залежно від їх поточних колірних координат. Ці три черепашки наочно покажуть, про що саме я говорю:

TweenMax.to (".turtle2 path, .turtle2 circle, .turtle2 ellipse", 1.5, {fill:"hsl (+=0, +=50%, +=0%) "});

Інші колірні ефекти

Режим накладення шарів

Якщо Ви ознайомлені з ефектами шарів у Photoshop, то Вам відомі режими накладення шарів. Майже кожен сайт в 90-х використовутав їх (так, і мій також). Вони поєднують два шари, а всього доступні 16 режимів накладення. Ми не розбиратимемо їх всі, але основні моменти розглянемо.

Верхнє зображення або колір називається джерелом, source, а нижній шар – метою, destination. Область між ними – це те місце, де відбувається вся магія, і називається вона backdrop. Змішення відбувається за певними формулами.

Формула режиму накладення залежить від типу ефекту. Наприклад, для створення (multiply): destination × source = backdrop. Інші ефекти – це різні комбінації базових математичних операцій. Лінійне накладення – це A+B − 1, а “вигорання кольору” – це 1 − (1 − B) ÷A. Насправді, знати ці формули не обов’язково.

Ось детальна документація, а нижче Ви можете побачити просту і наочну демку:

Крім того, ось відмінна стаття, що демонструє вражаючі ефекти, які виникають за накладення декількох режимів один на одного. Нижче ми розглянемо спільне використання режимів накладення і фільтрів.

Фільтри

Фільтри CSS надають багато колірних ефектів. Ось стаття, яка показує, як працюють основні фільтри. Крім того, подивіться цікавий сайт.

feColorMatrix

У моєї знайомої є відмінна стаття, що описує створення схожих зображень за допомогою feColorMatrix, примітиву фільтру в SVG, який можна застосувати і до HTML-елементів. Це дуже потужний інструмент, що дозволяє тонке налаштування кольорів. Ось базовий приклад використання:

   

Також матрицю можна розширити і змінювати тон, насиченість і багато іншого:

 

Також з основами SVG можна ознайомитися, прочитавши книгу SVG Colors, Patterns & Gradients чи скориставшись цією детальною демкою.

Доступність та інші аспекти кольору

Колір стає кольором тільки тоді, коли він використовується відносно іншого кольору. Ось що робить роботу з кольором по-справжньому важкою. І тут постає питання доступності. Світло-зелений колір на чорному фоні може бути доступним, але на білому він абсолютно не читається.

Доступність кольору можна виміряти декількома інструментами. Ось мої улюблені:

Також дуже зручно спочатку налаштовувати свою палітру кольорів відповідно до доступності, і в цьому Вам може допомогти інструмент Color Safe. Після завершення роботи доступність сторінки допоможе оцінити WAVE (Web Accessibility Tool).

Колір і атмосфера

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

Тіні

Тіні зовсім не сірі – їх колір залежить від кольору світла. Є джерело світла має жовтий відтінок, тінь здаватиметься фіолетовою. Це варто враховувати при роботі з тінями.

Нативне введення кольору

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

Забавні “штучки” для розробників та інші ресурси

  • Я використовую цей плагін для Sublime Text для того, щоб зрозуміти, як браузер інтерпретує той або інший колір.
  • Є різні стандартні комбінації палітр, і розібратися в них Вам допоможуть ресурси Paletton і Adobe Color. Ну а якщо Вам не хочеться придумувати щось самим, то на допомогу прийде Coolors.
  • Для швидкої зміни формату кольору підійде сайт Colorhexa.
  • Крім того, можна навіть розфарбовувати консольні виведення. Вам допоможе ця демка.

Висновок

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

Переклад статті “A Nerd’s Guide to Color on the Web”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *