Вы здесь: Главная > CSS > Всё, что можно о цветах в CSS

Всё, что можно о цветах в CSS

Опубликовано автором Просмотры: 6

Мы уже знаем, что цвета могут определяться по названию, RGB или шестнадцатеричным значениям, но CSS 3 также позволяет вам рисовать с помощью HSL — оттенка, насыщенности и светлоты — а также указывать прозрачность.

Здесь нет никаких особенных свойств — HSL и RGBa (буква “a” означает “альфа”, как в “альфа-прозрачности”). Они могут быть применены к любому свойству, имеющему значение цвета, такому как color, background-color, border-color или box-shadow, и это лишь некоторые из них.

Альфа-прозрачность

RGBa открывает новое захватывающее измерение в веб-дизайне, позволяя вам устанавливать прозрачность рамки или текста. Например, если вам нужно, чтобы сквозь заголовок проглядывала капелька шикарного фонового изображения, вы могли бы использовать что-то вроде этого:

h1 {
    padding: 50px;
    background-image: url(snazzy.jpg);
    color: rgba(0,0,0,0.8);
}

Стандартное значение rgb(0,0,0) придало бы заголовку значение чистого чёрного, но это четвёртое значение в rgba задаёт уровень прозрачности: «1” — полностью непрозрачный, “0” — полностью прозрачный. Так rgba(0,0,0,0.8) говорят, что красный = “0”, зелёный = “0”, синий = “0”, альфа = “0,8”, что в совокупности делает его на 80% чёрным.

Это, конечно, относится не только к тексту, вы могли бы применить прозрачный цвет фона ко всему блоку, прозрачную тень блока… везде, где вы можете использовать rgb, вы можете использовать rgba.

Оттенок, насыщенность и яркость

Помимо названий цветов, веб-цвета всегда были смещены в сторону красного, зелёного и синего, будь то с помощью шестнадцатеричных кодов или явного RBG (или RGBa). Хотя HSL несколько менее понятен (особенно если ваш мозг обучен разделять цвета на красный, зелёный и синий), на самом деле он может быть более интуитивным, потому что даёт вам прямой контроль над аспектами оттенка цвета, а не над его логическими составляющими.

Он используется аналогично rgb:

#smut { color: hsl(36, 100%, 50%) }

Оттенок (“36” в приведённом выше примере): любой угол от 0 до 360, взятый из обычного цветового круга, где “0” (и “360”) — красный, “120” — зелёный и “240” — синий.

Насыщенность (“100%” в примере): Насколько насыщенным вы хотите видеть цвет, от 0% (никакого, поэтому уровень серого зависит от яркости) до 100% (полный удар, пожалуйста).

Яркость (“50%” в примере): от 0% (чёрный) до 100% (белый), 50% — “нормальный”.

Таким образом, используемый здесь пример даст оранжевый цвет (36°), который будет насыщенным (100% насыщенности) и ярким (50% яркости). Это эквивалент #ff9900, #f90 и rgb(255, 153, 0).

HSLa

Эту потрясающую свежесть прозрачности и HSL можно комбинировать?! Тебе лучше в это поверить. Вот HSLa:

#rabbit { background: hsla(0, 75%, 75%, 0.5) }

Вы можете понять, что это даёт, верно?

hsl и hsla поддерживаются большинством современных браузеров, включая IE версии 9 и выше.

Страницы в тему:

Примеры CSS:

Добавить комментарий