Нововведения для работы с цветом в спецификации CSS3
HSL принимает три значения:
В цветовом круге тон в степени 0 (или 360) является красным, 120 зеленым, 240 синим. Числа в промежутке отражают различные оттенки.
Насыщенность процентного значения: при 100% полный цвет.
Яркость также определяется в процентах: 0% темный (черный), 100% светлый (белый), и 50% среднее значение цвета.
Это дает очень широкий спектр доступных цветов и тонов.
Пока HSL реализован в Opera 9.5, Safari 3, Konqueror и Mozilla браузерах. (на момент перевода статьи и в IE 9 тоже - Прим.PS-Studio.Info)
Смотрите следующий пример:
Верхний ряд, если вы видите его, составлен из HSL значений:
Code
<div style="background-color: hsl(0,100%, 50%);"></div> <div style="background-color: hsl(120,100%, 50%);"></div> <div style="background-color: hsl(240,100%, 50%);"></div>
Нижний ряд использует RGB значения:
Code
<div style="background-color: rgb(255,0,0);"></div> <div style="background-color: rgb(0,255,0);"></div> <div style="background-color: rgb(0,0,255);"></div>
Более подробное объяснение цветов HSL можно найти в
Цвета HSLA
Как RGBA является RGB, так и HSLA является HSL , то есть, добавляется четвертое значение, которое устанавливает прозрачность (через альфа-канал) элемента.
На момент написания, только Safari 3 и Firefox 3 Beta поддерживали спецификацию стиля HSLA цвета.
Например:
Верхний ряд (если вы один из немногих смельчаков, которые скачали бета-версию Firefox 3, то вы можете видеть это. - Прим.PS-Studio: на момент перевода статьи уже не нужно было быть смельчаком, всё прекрасно работало и в Opera и в прочих браузерах, включая IE9!) использует заявление HSLA;
Code
<div style="background-color: hsla(0,100%,50%,0.2);"></div> <div style="background-color: hsla(0,100%,50%,0.4);"></div> <div style="background-color: hsla(0,100%,50%,0.6);"></div> <div style="background-color: hsla(0,100%,50%,0.8);"></div> <div style="background-color: hsla(0,100%,50%,1);"></div>
Второй ряд выводит цвета с помощью RGB.
Code
<div style="background-color: rgb(243,191,189);"></div> <div style="background-color: rgb(246,143,142);"></div> <div style="background-color: rgb(249,95,94);"></div> <div style="background-color: rgb(252,47,47);"></div> <div style="background-color: rgb(255,0,0);"></div>
Более подробное объяснение цветов HSLA можно найти в
Непрозрачность (opacity)
Наиболее широкое применение получило свойство CSS3 opacity. Это и понятно, ведь его так долго ждали.
Смотрим пример:
Почувствуйте разницу в коде между первым рядом, в котором выводятся те же результаты цвета для строки, используя сочетания RGB с значениями прозрачности, и вторым, где используются RGB значения:
Code
<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.4;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.6;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 0.8;"></div> <div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>
И второй
Code
<div style=" background: rgb(243, 191, 189) ; "></div> <div style=" background: rgb(246, 143, 142) ; "></div> <div style=" background: rgb(249, 95 , 94) ; "></div> <div style=" background: rgb(252, 47, 47) ; "></div> <div style=" background: rgb(255, 0, 0) ; "></div>
Точно такой же эффект, как показано выше, можно достичь, используя rgba значения.
RGBA цвета
В CSS3 добавилась новая функция для настройки цвета. Наряду с rgb теперь вы можете также использовать rgba. Как вы уже видимо догадались, "а" в данном случае означает alpha. Эта новая функция позволяет указать значение непрозрачности для цветов. Это могло бы сделать жизнь веб-дизайнеров намного проще ...
Пока это было реализовано в Safari 3, и работает в Firefox 3, последних пре-альфа версиях. (на момент перевода статьи - во всех основных браузерах, включая IE9 - Прим.PS-Studio.Info)
Смотрим пример:
Почувствуйте разницу в коде между первым рядом, в котором используются значения RGBA цвета, а вторым, в котором используются RGB значения:
Code
<div style="background: rgba(255, 0, 0, 0.2);"></div> <div style="background: rgba(255, 0, 0, 0.4);"></div> <div style="background: rgba(255, 0, 0, 0.6);"></div> <div style="background: rgba(255, 0, 0, 0.8);"></div> <div style="background: rgba(255, 0, 0, 1) ;"></div>
И второй:
Code
<div style="background: rgb(243, 191, 189);"></div> <div style="background: rgb(246, 143, 142);"></div> <div style="background: rgb(249, 95 , 94) ;"></div> <div style="background: rgb(252, 47, 47) ;"></div> <div style="background: rgb(255, 0, 0) ;"></div>
Перевод: PS-Studio.Info
Всего комментариев: 0
Оставь комментарий первым!
Оставь комментарий первым!
