В предыдущем руководстве по свойству color в CSS мы рассказывали, как определять цвета, используя ключевые слова и обозначения RGB. В дополнение к этому CSS3 добавляет несколько новых функциональных обозначений для установки значений цвета для элементов: rgba(), hsl() и hsla().

В этом разделе мы их рассмотри по порядку.

Значения цвета RGBA

Цвета могут быть определены в модели RGBA (Red Blue Green Alpha) с использованием функциональной нотации rgba(). Цветовая модель RGBA является расширением цветовой модели RGB с альфа-каналом, который определяет непрозрачность цвета.

Параметр alpha принимает значение от 0.0 (полностью прозрачное) до 1.0 (полностью непрозрачное).

h1 {
    color: rgba(0,0,255,0.5);
}
p {
    background-color: rgba(0%,0%,100%,0.3);
}

Мы уже разбирали это свойство подробнее в Руководстве по свойству opacity в CSS.

Значения цвета HSL

Цвета также могут быть определены моделью HSL (Hue Saturation Lightness) с использованием функциональной нотации hsl(). Оттенок представлен в виде угла (от 0 до 360) цветового круга. Этот угол задается как число на единицу меньше, поскольку угол обычно измеряется в градусах, поэтому эта единица измерения подразумевается в CSS.

Насыщенность (saturation) и яркость (lightness) представлены в процентах. 100% насыщенность означает полный цвет, а 0% — оттенок серого. Принимая во внимание, что 100% яркости — это белый, 0% — черная, а 50% — нормальная. Посмотрим пример ниже:

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

В этой системе координат red=0=360, а остальные цвета распределены по кругу, поэтому green=120, blue=240 и т. д. Значение может быть указано в любую сторону окружности, например -120=240, 480=120 и т.д.

Значения цвета HSLA

Цвета могут быть определены в модели HSLA (Hue Saturation Lightness Alpha) с использованием функциональной нотации hsla(). Цветовая модель HSLA является расширением цветовой модели HSL с альфа-каналом, который определяет непрозрачность цвета.

Параметр alpha принимает значение от 0.0 (полностью прозрачное) до 1.0 (полностью непрозрачное).

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.