Возможности CSS3. Цветовые значения и их запись в CSS: как изменить цвет.

Тематическая группа (веб-дизайн): https://vk.com/zametkipohtml Официальный паблик в ВК: https://vk.com/zametkinapolyah Рубрика по теме в блоге: http://zametkinapolyah.ru/verstka-sajtov Не забудь подписаться и нажать палец вверх: https://www.youtube.com/user/zametkinapolyahru Цвета в HTML и CSS: http://zametkinapolyah.ru/verstka-sajtov/palitra-cveta-v-html-kody-html-cvetov-cvet-teksta-ssylki-fona-v-html.html Помощь проекту: WMR: R288272666982 WMZ: Z293550531456 Яндекс.Деньги: 410011531129223 Про работу с цветом HTML элементов средствами CSS мы поговорим более подробно в специально отведенной теме, сейчас же коротко рассмотрим какие значения есть в CSS для изменения цвета элементов. В CSS цвет элементов можно задавать несколькими способами (по имени цвета, цифрами в шестнадцатеричной системе счисления и числами десятичной системы) и для представления цвета в CSS используется четыре модели (RGB, RGBA, HSL, HSLA). Во-первых, разработчики браузеров добавили возможность изменять цвет, используя его имя, например: color: white сделает цвет текста белым, а background-color: red сделает цвет фона красным. На самом деле, за именем цвета кроется шестнадцатеричный код, а еще некоторые имена стандартизованы, а некоторые – нет, но об этом в другой теме. Шестнадцатеричная система счисления состоит из цифр от 0 до F. Комбинируя цифры шестнадцатеричной системы счисления мы можем записывать цвет, но перед числом обязательно нужно поставить символ решетки, чтобы браузер понимал, что это код цвета, а не просто набор букв и цифр. Как вы уже поняли, комбинация цифр и решетка – это код цвета в модели RGB, например: #FF0000 (красный), #00ff00 (зеленый), #0000FF (синий), #000000 (черный), #ffffff (белый). Как вы помните, модель RGB представляет собой три канала: красный, зеленый, синий. Первых две цифры отвечают за яркость красного канала (чем число больше, тем канал ярче), вторые две цифры – за зеленый канал, последние две цифры – синий. Принимаемые значения для одного канала находятся в диапазоне от 0(00) до 255(FF), следовательно, цвет можно задать в диапазоне от #000000 до #ffffff (16 777 215 – количество цветов и оттенков). Но есть и сокращенная запись цвета в модели RGB: #fa1, эта запись эквивалентна записи #ffaa11 или #04b (#0044bb). CSS позволяет использовать десятичную запись цветовых значений для моделей RGB, RGBA, HSL, HSLA. Для модели rgb синтаксис записи цвета в CSS выглядит следующим образом: rgb(0, 127, 255) Числа разделяются запятой, цвет задается для трех каналов, а сами числа лежат в диапазоне от 0 (канал отключен) до 255 (канал «светит» максимально ярко). Модель RGB допускает использовать вместо чисел проценты: rgb(0%, 50%, 100%) Модель RGBA (добавлена в CSS3 и не поддерживается старыми браузерами) очень похожа по синтаксису на модель RGB, но здесь добавляется четвертый канал, который отвечает за прозрачность элемента, он получил название альфа-канал и его значения лежат в диапазоне от 0(прозрачный элемент) до 1 (непрозрачный): rgba(25, 99, 112, 0.5) или rgba(77, 245, 190, .7) Если вы не знакомы с цветовыми моделями, описанными выше, то мы развеем все белые пятная в специальной теме, в которой поговорим про работу с цветами и изображениями в CSS. CSS позволяет использовать десятичную запись цветовых значений для моделей RGB, RGBA, HSL, HSLA. Для модели rgb синтаксис записи цвета в CSS выглядит следующим образом: rgb(0, 127, 255) Числа разделяются запятой, цвет задается для трех каналов, а сами числа лежат в диапазоне от 0 (канал отключен) до 255 (канал «светит» максимально ярко). Модель RGB допускает использовать вместо чисел проценты: rgb(0%, 50%, 100%) Модель RGBA (добавлена в CSS3 и не поддерживается старыми браузерами) очень похожа по синтаксису на модель RGB, но здесь добавляется четвертый канал, который отвечает за прозрачность элемента, он получил название альфа-канал и его значения лежат в диапазоне от 0(прозрачный элемент) до 1 (непрозрачный): rgba(25, 99, 112, 0.5) или rgba(77, 245, 190, .7) Модель HSL описывает цвет тремя параметрами: оттенок (Hue), насыщенность (Saturate) и светлота (Lightness). Оттенок задается в градусах, так как это значение, которое расположено на цветовом круге (0 – красный 120 – зеленый, 240 – синей, понятно, что 360 –красный, но его нет, так как CSS позволяет задавать значения оттенка цифрами от 0 до 359). Насыщенность цвета – величина относительная и измеряется в процентах: от 0% до 100%, нулевое значение говорит браузеру о том, что цвет отсутствует, а значение 100% говорит браузеру о том, что цвет должен быть максимально насыщенным. Светлота задает яркость цвет и также указывается в процентах от 0% (темные цвета) до 100% (максимально яркие цвета). При 0% мы получим черный цвет, а при 100% белый. Браузер IE 9 и ниже не поддерживают работу с цветам, заданным при помощи модели HSL. hsl (300, 37%, 65%) Модель HSLA включает в себя еще и альфа-канал, который действует по тем же правилам, что и альфа-канал модели RGBA: hsla (167, 56%, 59%, 0.3) или hsla (111, 44%, 57%, .7

Видео Возможности CSS3. Цветовые значения и их запись в CSS: как изменить цвет. автора Мастерство и Саморазвитие