[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - программирование / CSS /

Возможности применения цвета в CSS3

Источник: http://css-info.narod.ru/

Хотя сейчас еще преждевременно с уверенностью утверждать, какие браузеры будут поддерживать грядущую спецификацию 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:

   .red {color: hsl(0, 100%, 50%); }
   .green {color: hsl(120,100%,50%);}
   .darkgreen {color: hsl(120,100%,75%);}
   .lightgreen {color: hsl(120,100%,25%);}
   .blue {color: hsl(240,100%,50%);}
   .white {color: hsl(0,0%,100%);}
   .black {color: hsl(0,0%,0%);}
 

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

Как и спецификация цвета RGB, цвета HSL в CSS3 также должны поддерживать альфа-факторы; они измеряются значениями HSLA (тон, насыщенность, яркость, альфа-фактор). К примеру, правило определяло бы полупрозрачный светло-зеленый цвет.

   .translightgreen {color: hsla(120,100%, 25%, .0.5);}

Наконец, в CSS3 должны быть представлены свойства наподобие color-profile, которое сделает возможным определение цветового профиля (http://www.color.org) Международного консорциума по цвету (International Color Consortium, ICC). К примеру, для корректировки цветов изображений на странице CSS3 можно было бы задействовать правило вроде следующего:

   img {color-profile: URL("http://example.com/profiles/eg.icm"); } CSS3

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




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - программирование / CSS /

Font-size от xx-small до xx-large
05-01-2010   

Проблема размера шрифтов всегда волнует веб-разработчиков. В CSS есть семь ключевых слов для обозначения размера шрифта. Они введены для того, чтобы дизайнеры особо не напрягались над проблемами доступности текстов на страницах. Размер варьируется от xx-small до xx-large и этот размер берется относительно установленного пользователем в браузере размера medium. Вот что мы видим в спецификации CSS-1... подробнее

Кол. просмотров: общее - 4540 сегодня - 0

История про CSS (часть II)
05-01-2010   

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

Кол. просмотров: общее - 4901 сегодня - 1

Трюк с курсором
05-01-2010   

Наверно вы уже заметили, что на некоторых сайтах при наведении на ссылки появляется... совсем не рука, которая многим уже надоела, а какая-нибудь там стрелка, часы и т.п. Как это сделать? Очень просто! Надо всего лишь добавить стиль курсора в код ссылки. Пример кода... подробнее

Кол. просмотров: общее - 4561 сегодня - 0

Необычное применение CSS: реализация эффекта rollover c помощью CSS
05-01-2010   

Эрик Мейер нашел очень интересное использование псевдо-класса :hover. Оказывается, с помощью свойства display, контекстного селектора и :hover можно реализовать эффект rollover, когда при наведении мышкой появляется картинка. Делается это следующим образом... подробнее

Кол. просмотров: общее - 4525 сегодня - 1

Сокращенные команды в CSS
05-01-2010   

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

Кол. просмотров: общее - 5276 сегодня - 0



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects