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

Ранее мы рассмотрели новые CSS3-возможности выборки, а также способы добавления в дизайны пользовательской типографики. Теперь взглянем на методы, благодаря которым CSS3 позволяет нам работать с цветом и которые ранее были просто невозможны.

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

RGB-цвет

RGB (Red, Green, Blue — красный, зеленый, синий) — это цветовая система, существующая уже в течение десятилетий. Она работает путем определения разных значений для красного, зеленого и синего компонентов цвета. Например, красный цвет, используемый для нечетных навигационных ссылок на сайте And the winner isn’t., на данный момент определен в CSS как шестнадцатеричное значение #fe0208:

Nav ul li:nth-child(odd) a { color: #fe0208;

}

Однако при использовании CSS3 он может быть равным образом описан как RGB-значение:

Nav ul li:nth-child(odd) a { color: rgb(254, 2, 8);

}

В цветовых палитрах большинства программ для редактирования изображений цвета демонстрируются как в виде шестнадцатеричных, так и в виде RGB-значений. На рисунке 5.25 показана палитра цветов в Photoshop, где в полях R, G и B отображаются значения для каждого из каналов.

Цветовая палитра в программе Photoshop.

Как вы можете видеть, значение R равно 254, значение G — 2, а значение B — 8. Их легко перевести в значения CSS-свойства color. В CSS после определения цветового режима (например, RGB) значения красного, зеленого и синего цветов отделяются запятыми в скобках в упомянутом чуть ранее порядке.

HSL-цвет.

CSS3 также позволяет объявлять значения цветов в системе HSL (Hue, Saturation, Lightness — оттенок, насыщенность, осветление).

HSL — ЭТО НЕ ТО ЖЕ САМОЕ, ЧТО HSB!

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

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

HSL работает на основе 360-градусной шкалы для выбора цветов. Первое значение HSL-цвета, выраженное в градусах, представляет оттенок, который будет желтого цвета при 60°, зеленого — при 120°, голубого — при 240°, пурпурного — при 300° и, наконец, красного — при 360°. Таким образом, поскольку вышеупомянутый HSL-цвет имел оттенок со значением 315, легко понять, что он будет между пурпурным (при 300°) и красным (при 360°). Следующие два значения относятся соответственно к насыщенности и осветлению и выражаются в процентах, всего лишь изменяя основной оттенок. Для более насыщенного или красочного оформления используйте более высокое второе значение в процентах. Последнее значение, отвечающее за осветление, может варьироваться в промежутке от 0 %, что означает черный цвет, до 100 %, что означает белый цвет.

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

Nav ul li:nth-child(odd) a { color: hsl(359, 99%, 50%);

}

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

Nav ul li:nth-child(odd) a:hover { color: hsl(359, 99%, 40%);

}

В заключение необходимо отметить, что, если вы сможете запомнить мнемосхему «Young Guys Can Be Messy Rascals» (то есть Yellow (Желтый), Green (Зеленый), Cyan (Голубой), Blue (Синий), Magenta (Пурпурный), Red (Красный)) (или любую другую мнемосхему, которую, по вашему мнению, следует запомнить) для шкалы выбора цветов HSL, то сумеете на глаз указывать значения цветов HSL, не прибегая к палитре цветов, а также создавать их вариации. Продемонстрируйте этот фокус крутым специалистам по созданию серверных приложений на PHP и. NET во время вечеринки в офисе, и вы быстро заслужите их похвалу!

Значения резервных цветов для Internet Explorer версий 6, 7 и 8.

Как вы, возможно, догадываетесь, значения RGB и HSL не поддерживаются в версиях Internet Explorer ниже 9. Следовательно, если потребуется объявление резервного цвета для таких версий Internet Explorer, указывайте его первым до значения RGB или HSL.

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

Nav ul li:nth-child(odd) a { color: #fe0208; color: hsl(359, 99%, 50%);

}

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

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

Внесем некоторые изменения в домашнюю страницу сайта And the winner isn’t. ради наглядного примера. Сначала мы зададим состаренное фоновое изображение в элементе body:

Body {

Background: url(../img/grunge. jpg) repeat;

}

Теперь добавим белый фон в элемент <div> с идентификатором #wrapper (куда входят все остальные элементы). Однако вместо того, чтобы задавать сплошной белый цвет с помощью шестнадцатеричного значения, используем HSLA-значение, как показано в выделенной строке в следующем фрагменте кода:

#wrapper { margin-right: auto; margin-left: auto;

Width: 96%; /* Удерживание самого дальнего элемента <div> */ max-width: 1414px;

Background-color: hsla(0, 0%, 100%, 0.8);

}

Объявление цвета HSLA схоже по синтаксису со стандартными правилами HSL. Однако, кроме всего прочего, вам потребуется объявить значение как HSLA (вместо просто HSL) и задать дополнительное десятичное значение непрозрачности в промежутке от 0 (полная прозрачность) до 1 (полная непрозрачность). В данном случае мы указали, что наш белый элемент <div> с идентификатором #wrapper будет частично прозрачным. На рисунке 5.26 показано, как результат будет выглядеть в браузере.

Синтаксис RGBA подчиняется тем же правилам, что и его HSLA-эквивалент. Необходимо использовать дополнительное значение непрозрачности после значения цвета:

Background-color: rgba(255, 255, 255, 0.8);

Надеюсь, вы понимаете, что добавление альфа-канала к обоим цветовым режимам RGB и HSL позволяет проявлять большую гибкость при расположении элементов слоями. Это означает, что нам больше не нужно полагаться на прозрачность изображений (например, в формате PNG и GIF) для обеспечения визуального эффекта такого рода. И это отличная новость для тех, кто создает адаптивные вебдизайны.

ПОЧЕМУ БЫ ПРОСТО НЕ ИСПОЛЬЗОВАТЬ НЕПРОЗРАЧНОСТЬ?

CSS3 также позволяет задавать для элементов непрозрачность. Значения непрозрачности определяются в промежутке между 0 и 1 в десятичных числах (например, непрозрачность, заданная как 0.1, равна 10 %). Однако все это отличается от RGBA и HSLA тем, что определение значения непрозрачности для того или иного элемента приводит к тому, что она применяется ко всему этому элементу целиком. А установка значения RGBA или HSLA между тем позволяет отдельным частям элемента иметь альфа-слой. Например, для фона элемента может быть задано значение HSLA, а для текста внутри него — сплошной цвет.

Рисунок 5.26. Под частично прозрачным белым цветом видно фоновое изображение.

Модуль CSS3 Color стал первым из модулей CSS3, достигшим продвинутого статуса W3C Recommendation (REC). Следовательно, как и CSS3 Selectors, этот модуль абсолютно готов к использованию уже сейчас, и можно с полной уверенностью сказать, что метод его реализации вряд ли изменится в будущем.

Резюме..

В этой главе мы выяснили, насколько легко можно выбрать почти все, что нам необходимо в конкретной странице, используя новые CSS3-селекторы. Мы также взглянули на то, как можно создать адаптивные колонки за очень короткое время и решить распространенные рутинные задачи вроде переноса части длинного URL-адреса на новую строку. Теперь мы также имеем представление о новом модуле CSS3 Colors и о том, как можно применять цвета с использованием значений RGB и HSL наряду с прозрачными альфа-слоями для обеспечения прекрасного эстетического эффекта. Кроме того, в этой главе мы научились добавлять.

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

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