Что CSS грядущий нам готовит? Часть пятая: rgba и hsla

Сегодня мы рассмотрим сразу два свойства - rgba и hsla. Данные свойства – производные от rgb и hsl (hsl, к слову, до сих пор не поддерживается в IE), и единственное отличие в них – это четвёртый параметр, отвечающий за прозрачность.
Возможно, вы спросите: зачем использовать эти свойства, если есть opacity, которое худо-бедно поддерживается большинством браузеров?


Вот два блока.
Они выглядят совершенно одинаковыми.

Добавляем текст:

И видим, что в первом блоке текст также стал полупрозрачным.

Для решения этой проблемы есть три варианта:

1. Использование полупрозрачного PNG вместо фона.

Плюсы: Кроссбраузерность.
Минусы: В IE 6 требует допиливания с помощью AlphaImageLoader.

2. Подложка прозрачного блока под основной блок.

Подробнее рассматривается здесь.
Плюсы: Без дополнительных изображений, возможность использовать плагин jQuery.
Минусы: Без JS размер подложки будет не зависящим от размеров основного блока.

3. Свойство rgba.

Плюсы: Самое лаконичное и простое решение.
Минусы: Не поддерживается в IE.


Сегодня мы рассмотрим последний вариант.
В данном свойстве сначала перечисляются цвета (красный, зелёный и синий, что следует из названия), а затем идёт параметр alpha, который и будет определять прозрачность (от 0 до 1).

При необходимости можно использовать hsla, где используются тон (от 0 до 360), насыщенность (от 0% до 100%) и светлота (от 0% до 100%).

Конечно, rgba и hsla можно использовать не только для фона, но и для текста, границ и всего, к чему можно применить атрибут color.

Итог

Если бы не IE, то rgba и hsla можно было использовать уже сейчас для решения многих повседневных задач.
Хотя при желании для IE можно воспользоваться первым или вторым способом, скорее всего усилия не стоят ожидаемого результата.
Лично я так и буду использовать первый способ. По крайней мере, до тех пор, пока IE (до 8 версии включительно) не уйдет в небытие :)

---

Категории

• CMS
• CSS
• jQuery
• MySQL
• PHP
• Вёрстка

Контакты