Хотя сейчас еще преждевременно с
уверенностью утверждать, какие браузеры будут поддерживать грядущую спецификацию
CSS3, некоторые аспекты обеспечения цвета заслуживают по меньшей мере краткого
упоминания, с тем чтобы указать на будущие возможности.
Во-первых, спецификация CSS3 предусматривает определение непрозрачности для
элементов. Той же цели можно добиться с помощью видоизмененной спецификации
цвета, которая обозначается как rgba - в ней в качестве четвертого значения
добавляется альфа. Альфа-фактор варьирует от 0,0 (полная прозрачность) до 1,0
(полная непрозрачность). В CSS3 можно применять правила наподобие этого:
em {color:
rgba(255,0,0,1);} /* полностью непрозрачный красный */ strong {color:
rgba(0, 0, 255, 0.5);} /* частично прозрачный зеленый */
Другое усовершенствование,
представленное в CSS3, заключается в возможности задавать цвет в формате HSL (Hue
Saturation Lightness, тон-насыщенность-яркость). Цвета HSL определяются в виде
трех значений (тон, насыщенность, яркость). Тон представляется как угол
цветового круга, где красному соответствует 0 или 360, зеленому - 120, синему -
240, а другие цвета находятся в диапазоне между этими значениями. Насыщенность
выражается в процентах, так что 0% обозначает отсутствие насыщенности, или
градацию серого, в то время как 100% - это полная насыщенность тона. Яркость
также выражается в процентном отношении; при этом 100% обозначает яркость в
форме белого, а 0% - в форме черного. Чаще всего будет применяться значение
яркости 50%, устанавливающее "нормальную" величину. Принимая во внимание эти
спецификации, имеют смысл следующие правила CSS:
Хотя это может
показаться еще одним способом определения цвета, регулировка спецификации HSL
более наглядна, и в большинстве случаев вариации цвета проще создавать, сохраняя
тон, но корректируя насыщенность и интенсивность.
Как и спецификация цвета RGB,
цвета HSL в CSS3 также должны поддерживать альфа-факторы; они измеряются
значениями HSLA (тон, насыщенность, яркость, альфа-фактор). К примеру, правило
определяло бы полупрозрачный светло-зеленый цвет.
Наконец, в CSS3 должны быть
представлены свойства наподобие color-profile, которое сделает возможным
определение цветового профиля (http://www.color.org)
Международного консорциума по цвету (International Color Consortium, ICC). К
примеру, для корректировки цветов изображений на странице CSS3 можно было бы
задействовать правило вроде следующего:
Способность корректировки
цветовоспроизведения в браузерах долго заставляла себя ждать. Реальная проблема
с цветом в Web, которую мы усматриваем, состоит в том, что с таким широким
выбором сред просмотра различие между цветами, которые мы определяем, и тем, что
на самом деле появляется, может быть довольно существенным - если не проявлять
осторожность.
Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее
Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей... подробнее
Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее
Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее
Одно из основных преимуществ использования CSS - это значительное уменьшение времени загрузки страниц. Для того, чтобы назначить стиль тексту, нужно было раньше использовать конструкцию множество раз... подробнее