AJAX загрузка
home

В CSS3 было добавлено несколько новых способов задания цвета.

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

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

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

  1. оттенок цвета указывается в градусах поворота цветового круга (0 градусов - красный, 120 градусов - зеленый, 240 градусов - голубой и т.д.);
  2. Цветовой круг
  3. насыщенность цвета указывается в процентах (по мере понижения процентов цвет будет блекнуть);
  4. яркость цвета также указывается в процентах (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);
}