Возможности 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)
Кирилл Антонов
Канал для начинающего веб-разработчика. Здесь ты найдешь различные видео уроки о технологиях и программном обеспечение, которые используют веб-разработчики.
Последние сообщения
127 полезных и бесплатных онлайн академий
23.04.2019
