Фрэйн . - HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд.

Новые форматы цвета в CSS3 и альфа-прозрачность

До сих пор в данной главе рассматривались вопросы предоставляемых CSS3 новых эффективных возможностей выбора элементов и добавления к нашим конструкциям пользовательского шрифтового оформления. Теперь будут рассмотрены обеспечиваемые CSS3 способы работы с цветом, которые раньше были просто недоступны.

Прежде всего, CSS3 предоставляет два новых способа объявления цвета: RGB и HSL. Кроме того, эти два формата позволяют нам использовать вместе с ними альфа-канал (соответственно RGBA и HSLA).

Цвет в формате RGB

Красный, зеленый и синий — Red , Green и Blue (RGB) — это система задания цвета, которая существует уже не одно десятилетие. Она работает путем определения значений для красного, зеленого и синего компонентов цвета. Например, красный цвет может быть определен в CSS в виде шестнадцатеричного значения (HEX-значения) #fe0208:

.redness {

color: #fe0208;

}

совет

Если хотите получить описание способа более интуитивно понятного восприятия значений, выраженных шестнадцатеричными числами, я могу порекомендовать следующую статью в Smashing Magazine: http://www.smashingmagazine.com/2012/10/04/the-code-side-of-color/.

Но с помощью CSS3 этот цвет может быть указан также в виде RGB-значения:

.redness {

color: rgb(254, 2, 8);

}

Большинство приложений редактирования изображений показывают цвета на панели их выбора в виде как HEX-, так и RGB-значений. У панели выбора цвета программы Photoshop имеются R-, G- и B-области, показывающие значения для каждого из этих каналов. Например, значение R может выражаться числом 254, G — числом 2, а B — числом 8. Все это весьма просто преобразуется в значение цвета для CSS. В CSS после определения режима задания цвета (например, RGB) значения для красного, зеленого и синего цветов отделяются друг от друга запятыми и записываются внутри скобок именно в таком порядке, как показано в предыдущем примере кода.

Цвет в формате HSL

Кроме формата RGB, CSS3 позволяет использовать для объявления цвета значения в формате «тон, насыщенность и яркость» — Hue , Saturation и Lightness (HSL).

Не нужно путать HSL и HSB!

Не следует ошибочно полагать, что значение в формате Hue, Saturation и Brightness (HSB), показанное на панели выбора цвета в таких приложениях редактирования изображений, как Photoshop, — это то же самое, что и HSL. Это не так!

Востребованность формата HSL объясняется относительной простотой понимания того, какой именно цвет будет представлен при заданных им значениях. Например, если вы не обладаете какими-то сверхспособностями по подбору цвета, держу пари, что вам не удастся с ходу сказать, какой это цвет: rgb(255, 51, 204). Есть желающие? Только не я. А вот покажите мне HSL-значение hsl(315, 100%, 60%), и я могу высказать догадку, что это где-то между пурпурным и красным цветом (хотя это ярко выраженный розовый цвет). Как я догадался? Да очень просто.

HSL-формат основан на цветовом диске в 360°. Вот как он выглядит.

Первая цифра в цветовом определении формата HSL представляет собой тон — Hue. Глядя на диск, можно понять, что желтый (Yellow) находится на отметке 60°, зеленый (Green) — 120°, светло-голубой (Cyan) — 180°, синий (Blue) — 240°, малиновый (Magenta) — 300° и, наконец, красный (Red) — 360°. Следовательно, если вышеупомянутый цвет в формате HSL имеет тон 315, нетрудно понять, что он будет располагаться между малиновым (Magenta), который находится на отметке 300°, и красным (Red), находящимся на отметке 360°.

Следующие два значения в HSL-определении задают насыщенность и яркость и указываются в процентах. Ими просто задается изменение базовой насыщенности. Для более насыщенного, красочного вида во втором значении указывается более высокий процент. Последнее значение управляет яркостью (Lightness) и может варьироваться от 0 для чистого черного цвета до 100 % для абсолютно белого цвета.

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

.redness {

color: hsl(359, 99%, 50%);

}

Если нужен чуть более темный цвет, можно воспользоваться теми же HSL-значениями, изменив всего лишь процентный показатель яркости (последнее из значений):

.darker-red {

color: hsl(359, 99%, 40%);

}

В заключение, если вы в состоянии запомнить для цветового диска HSL мнемоническое правило Young Guys Can Be Messy Rascals (или любое другое удобное для вас выражение), то сможете приблизительно задать значение цвета в формате HSL, для чего не придется обращаться к панели выбора цвета, а кроме этого, задать еще и его оттенок. Покажите этот трюк на корпоративной вечеринке в обществе парней и девушек из компании разработчиков на Ruby, Node или .NET и сможете быстро набрать очки, повысив свой престиж!

Альфа-каналы

До сих пор мне приходилось терпеть ваше едва сдерживаемое удивление по поводу того, к чему вся эта возня вокруг HSL или RGB и почему нужно отдавать им предпочтение над старым, годами проверенным форматом с использованием HEX-значений. Основное отличие HSL и RGB от HEX заключается в том, что эти два формата позволяют использовать канал альфа-прозрачности. Это дает возможность видеть то, что находится под верхним элементом.

Объявление цвета в формате HSLA похоже по синтаксису на стандартное HSL-правило. Но дополнительно нужно указать значение как hsla, а не просто как hsl и добавить показатель прозрачности, задаваемый между 0 (полная прозрачность) и 1 (полная непрозрачность), например:

.redness-alpha {

color: hsla(359, 99%, 50%, .5);

}