CSS3 прозрачность, свойства Opacity и RGBA цвета

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

Начнем с свойства CSS3 opacity. Этот параметр отвечает за прозрачность html элементов. Его синтаксис до ужасного прост. Значение прозрачности можно задавать в пределах от нуля до единицы. Пример:

<p style="color:blue; opacity:1">Прозрачность текста</p>

<p style="color:blue; opacity:0.5">Прозрачность текста</p>

<p style="color:blue; opacity:0.2">Прозрачность текста</p>

Помимо свойства opacity в CSS3 можно использовать модель цвета RGBA. Последнее свойство является аналогом opacity, но имеет более широкое применение.

Синтаксис RGBA (красный, зеленый, синий, прозрачность). Все оттенки в HTML создаются путем смешивания трех основных цветов – красного, зеленого и синего. Значения каждого цвета в CSS RGBA могут принимать целые числа в диапазоне от 0 до 255 или проценты от нуля до 100%.

То есть записи вида rgba(255, 255, 255, 1) и rgba(100%, 100%, 100%, 1) означают одно и то же (белый цвет).

Примеры оттенков:

103, 255, 197    255, 111, 236    249, 255, 183    255, 118, 84

Четвертый параметр свойства CSS3 RGBA отвечает за прозрачность цвета и может принимать значения от нуля до единицы.

В итоге имеем такой синтаксис: rgba(0-255, 0-255, 0-255, 0-1).

Приведу пример использования прозрачности элемента:

HTML код: <div style="background-color: #ff6699; margin-top: 20px; margin-left: 100px; width: 100px; height: 50px; position: relative; z-index: 1; text-align: center;">
цвета &nbsp;&nbsp;RGBA<br />прозрачность</div>
<div style="background-color: rgba(255, 255, 0, 0.5); width: 100px; height: 50px; z-index: 10; position: relative; top: -60px; left: 70px;">&nbsp;</div>

В выше приведенном примере вместо background-color: rgba(255, 255, 0, 0.5) можно было бы подставить код background-color: yellow; opacity:0.5. Результат был бы одинаков.

Модель цвета RGBA очень хорошо сочетается с другими свойствами CSS3. В предыдущей статье я разбирал эффекты тени, которые создаются с помощью свойства box-shadow. Давайте дополним этот материал. Используя вместе свойства box-shadow и RGBA можно создавать тени для элементов различной степени прозрачности. Пример:

<div style="width:200px; height:50px; background-color:#be3ca7; box-shadow:20px 20px 0 rgba(190, 60, 167, 0.3)">&nbsp;</div>

Свойства CSS3 Opacity и RGBA полностью поддерживаются всеми современными браузерами, включая Internet Explorer 9. Однако для IE 9 необходимо наличие тега doctype на веб-странице. В частности я использую переходный xhtml 1.0 доктайп. Без тега доктайп свойства CSS3 в IE 9 работать не будут.