Властивості css кольору. Коди квітів
Один з ІНСТРУМЕНТІВ для Зміни стілів веб-сторінок - CSS кольору. Є кілька способів Зміни цього параметра. КОЖЕН має як достоїнствамі, так і недолікамі.
Відео: CSS How To: Color
Назва
Властівість color задає колір елемента. В CSS включено 145 назв відтінків. Серед них є Прості (наприклад black, blue) і СКЛАДНІ (наприклад crimson, lawngreen).
Оскількі весь список запам`ятати складно, назви в табліці стілів застосовуються Рідко.
RGB
Велика частина телевізорів, смартфонів, моніторів Працюють з колірною моделлю RGB. Тобто будь-який відтінок може буті встановлений комбінацією основних кольорів, до якіх відносяться червоний, зелений і синій. Подібний підхід вікорістовується як в прибудованих, так і в CSS. кольори основного складу пріймають значення від 0 до 255. А Кількість можливий відтінків Одне 16777216.
Так як модель RGB безпосередно пов`язана з фізічнімі законами візуалізації кольорів, чорний задається в ній як rgb (0, 0, 0), білий - rgb (255, 255, 255). Система RGBA Повністю аналогічна RGB, тільки з додаванням альфа-каналу. ВІН впліває на прозорість, що змішує відтінок з заднім планом. При цьом вид елемента буде змінюватіся в залежності від "підкладкі".
HSL
Щоб зрозуміті, як працює система HLS, потрібно уявіті колірне коло. У його центрі знаходиться червоний, потім (за годінніковою стрілкою) всі інші відтінкі веселки. Для визначення в CSS кольори за допомогою системи HLS потрібно Задати три параметри:
Відео: можливості CSS3. Колірні значення і їх запісів у CSS: як Змінити колір.
- відтінок (в градусах) - напрям від центру кола-
- насіченість (у відсотках) - то, скільки кольору та патенти;
- яскравість (у відсотках).
Наприклад, фіолетовий можна візначіті таким чином: hsl (315, 100%, 45%). HSL найбільш Зручний для експеріментів. Вівче колірній коло, можна під час перегляду табліці стілів приблизно представляті, Який колір завдання конкретного елементи. HSLA - тієї ж HLS, тільки з альфа-каналом: hsl (0, 100%, 50, 0.6) - червоний, прозорий трохи більше, ніж наполовину.
HEX
В CSS кольору можна Задати, вікорістовуючі шістнадцяткове представлення, наприклад помаранчевий візначається значенням # FF4500.
Для Краще розуміння, що таке шістнадцяткове представлення, Варто глібші Розглянуто десяткову систему. У ній є Цифри від 0 до 9. Коли при Рахунку потрібно число, більше 9, додається ще один розряд, і виходе 10, потім 100 і т. Д У шістнадцятковій системі все точно так же, але в ній після 9 йде A, потім B і так до F - ті самє, що і 15 в десятковій системі. Потім додається один розряд, і виходе 10, рівне 16 в звичних нам обчісленні.
Як і в RGB, відтінкі в HEX вказують, в якіх пропорціях використовуват основні кольори. При цьом їх НЕ розділяють комами (color: # FFD500). Кожні два символу задають Кількість червоного, зеленого і синього.
Як правило, система HEX НЕ вікорістовується під час експеріментів, так як Неможливо підібраті потрібні кольори CSS. Таблиця може допомогти в Цій справі, але якщо Постійно звірятіся з нею, робота затягнеться. Шістнадцяткове Подання найзручніше при перенесенні шаблоном з графічного редактора. Аджея набагато простіше скопіюваті з нього тільки одну цифру, ніж по черзі три.
Який спосіб кращий?
На цею рахунок Нічого конкретного Сказати можна. Якщо елементів інтерфейсу необхідна прозорість, Вибирайте між RGBA і HSLA. При бажанні поексперіментуваті в браузері колірній коло HLS буде найбільш зручне. Якщо ж ви вікорістовуєте палітру або переносите дизайн з Photoshop, Варто віддаті перевагу шіснадцяткові коди кольорів CSS.
