Задание цвета с помощью HSL

В CSS3 цвет может задаваться с помощью HSL, то есть оттенка, насыщенности и яркости.

Для того, чтобы задать цвет этим способом Вы должны указать:

1.оттенок цвета указывается в градусах поворота цветового круга (0 градусов - красный, 120 градусов - зеленый, 240 градусов - голубой и т.д.);

Цветовой круг

2.насыщенность цвета указывается в процентах (по мере понижения процентов цвет будет блекнуть);

3.яркость цвета также указывается в процентах (0% - темный, 100% - светлый).

Пример

#wrap1 {

background-color:hsl(0,30%,50%);

#wrap2 {

background-color:hsl(120,100%,80%);

#wrap3 {

background-color:hsl(240,100%,50%);

Задание цвета с помощью RGBA

Данный способ позволяет определять цвет и прозрачность одновременно.

Вначале необходимо указать значения RGB, а затем значение прозрачности (0 - максимальная прозрачность, 1 - минимальная прозрачность).

Обратите внимание: задание прозрачности с помощью RGBAотличается от действия свойства opacity тем, что opacity делает прозрачным сам элемент и все его элементы потомки, а RGBAделает прозрачным только сам элемент.

Пример

#wrap1

background-color:rgba(0,0,0,0.6);

Задание цвета с помощью HSLA

Подобно RGBA цвет сразу вместе с прозрачностью можно задавать используя HSLA.

Пример

#wrap1

background-color:hsla(0,100%,0%,0.6);

<Предыдущая Следующая>

Последние добавления

HTML для новичков

XHTML

CSS для новичков