Page 67 - Сила CSS3 Освой новейший стандарт

Графические эффекты без графики • 67

Создание полупрозрачного Фона С помощью rGba и hSla

С формой облачков ничего больше делать не нужно — мы создали скругленные
углы и хвостики, и этого достаточно — но мне все же хотелось бы с помощью
дополнительных графических деталей добавить картинке глубины и визуальной
насыщенности.
Прекрасный способ добиться этого — сделать фон полупрозрачным (использовать
прозрачность в альфа-канале). Когда основной фон страницы немного просве-
чивает сквозь подложку комментария, создается впечатление многослойности,
будто полупрозрачный элемент парит над страницей. Мне кажется, это особенно
хорошо смотрится в применении к облачкам с текстом — ведь облачка и должны
быть легкими и воздушными.
До появления CSS3 создать эффект полупрозрачности можно было, выложив фон
изображениями в формате PNG с прозрачным альфа-каналом. Однако использова-
ние фонового изображения означает дополнительное обращение к серверу с целью
получить оттуда файл, что замедляет загрузку страницы. Производительность сни-
жалается еще сильнее в IE 6, так как для понимания прозрачности в альфа-канале
этому браузеру требуется дополнительный сценарий. Помимо этого, невозможно
с использованием изображения оформить рамку элемента, т. е. хвостик облачка все
равно остался бы непрозрачным. Полупрозрачное облачко с хвостиком, залитым
сплошным цветом, смотрелось бы, по меньшей мере, странно.
Синтаксис RGBA и HSLA в CSS3
К счастью, в CSS3 нам на помощь приходят сразу два метода: RGBA и HSLA. Оба
они позволяют одновременно задать цвет элемента и уровень его прозрачности.
RGBA расшифровывается как red-green-blue-alpha (красный-зеленый-синий-аль-
фа), а HSLA — как hue-saturation-lightness-alpha (тон-насыщение-яркость-альфа).
Для указания оттенка синего, который будет отображаться в качестве подложки
облачков с комментариями, можно использовать любой из следующих вариантов
синтаксиса:

шестнадцатеричный: #A6DADC;
RGB: 166, 218, 220;
RGBA: 166, 218, 220, 1;

HSL: 182, 44%, 76%;
HSLA: 182, 44%, 76%, 1.
В любом случае мы получаем один и тот же цвет, просто по-разному определяем
его (вроде как «мы говорим „херши“, подразумеваем „кола“»).
В синтаксисе RGBA первые три значения указывают количество красного, зеленого
и синего цвета по шкале от 0 до 255 или от 0% до 100% (чаще встречаются значения

www.trk.kg