beget banner 468x60beget banner 728x90beget banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

Руководство по свойству color в CSS3

В предыдущем руководстве по свойству 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);
}
jivo banner 480x320jivo banner 728x90jivo banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее