Что такое RGBa?
В дополнение к RGB (Красный, Синий, Зеленый), CSS3 предлагает еще одну функцию настройки цвета под названием RGBA. Здесь все то же самое, но дополнено параметром Alpha, что задает параметр уровня прозрачности каждого цвета. Альфа канал обычно используется как канал уровня прозрачности. Если у пикселя значение альфа канала выставлено на 0%, то он будет полностью прозрачен (т.е. невидим), а если 100%, то он будет полностью отображен без коэффициента прозрачности. Мы можем применять этот параметр ко всему, к чему можно применить стили CSS.
Простой код CSS:
P { background-color: rgba(255, 0, 0, 0.5); }Теперь мы можем использовать RGBA, и не беспокоиться о генерации функции у пользователей, так как все современные браузеры (Firefox 3, Chrome, Safari и Opera 10) поддерживают её. Чего нельзя сказать только об Internet Explorer.
Пример кода CSS:
.round1, .round2, .round3 {
-moz-border-radius: 80px; -webkit-border-radius: 80px;
width: 154px; height: 154px; position:relative;
}
.round1 {
background-color: rgba(255,0,0,.5);
border: 3px solid #ff0000;
}
.round2 {
background-color: rgba(0,255,0,.5); left: 80px;
top: -160px; border: 3px solid #00ff00;
}
.round3 {
background-color: rgba(0,0,255,.5); left:40px;
top: -250px; text-align: center;
color:#FFFFFF; font: bold 26px Arial, Helvetica, sans-serif;
border: 3px solid #0000ff;
}
.round1:hover, .round2:hover, .round3:hover {
border: 3px solid #ffff00;
}Пример кода HTML:
<div class="round1"> </div>
<div class="round2"> </div>
<div class="round3">HAI</div>Что такое уровень прозрачности?
Уровень прозрачности также является параметром CSS3, который позволяет нам напрямую устанавливать уровень прозрачности конкретных элементов посредством CSS. Уровень прозрачности варьируется от 0 (полное отображение) до 1 (полностью прозрачен). Например, для того, чтобы увидеть 50% прозрачности, нужно выставить значение в 0.5.
Код CSS:
P { background-color: #7cb01e; opacity: 0.5; }
Пример кода CSS:
.boxA { background-color: rgb(84, 107, 1); opacity: 0.1; }
.boxB { background-color: rgb(84, 107, 1); opacity: 0.2; }
.boxC { background-color: rgb(84, 107, 1); opacity: 0.3; }
.boxD { background-color: rgb(84, 107, 1); opacity: 0.4; }
.boxE { background-color: rgb(84, 107, 1); opacity: 0.5; }
.boxF { background-color: rgb(84, 107, 1); opacity: 0.6; }
.boxG { background-color: rgb(84, 107, 1); opacity: 0.7; }
.boxH { background-color: rgb(84, 107, 1); opacity: 0.8; }
.boxI { background-color: rgb(84, 107, 1); opacity: 0.9; }
.boxA:hover, .boxB:hover, .boxC:hover, .boxD:hover, .boxE:hover,
.boxF:hover, .boxG:hover, .boxH:hover, .boxI:hover {
opacity: 1.0; color:#FFFFFF;
}Пример кода HTML:
<div class="boxA">www.deepubalan.com</div>
<div class="boxB">www.deepubalan.com</div>
<div class="boxC">www.deepubalan.com</div>
<div class="boxD">www.deepubalan.com</div>
<div class="boxE">www.deepubalan.com</div>
<div class="boxF">www.deepubalan.com</div>
<div class="boxG">www.deepubalan.com</div>
<div class="boxH">www.deepubalan.com</div>
<div class="boxI">www.deepubalan.com</div>Разница между RGBA и Opacity
Хотя оба эти параметры используются для указания уровня прозрачности элементов, они не одинаковы. Так в чем же разница?
Когда мы применяем параметр opacity, он наследуется всеми дочерними элементами. Например, если мы применим значения уровня прозрачности существующему Div (div { opacity: 0.5; } ), то текст, изображения и все другие элементы, размещенные в пределах заданного div, унаследуют значение параметра.
RGBA позволяет нам устанавливать прозрачность отдельным конкретным элементам. Другими словами, RGBA можно использовать индивидуально для каждого элемента.
Пример использования RGBA (слева) и Opacity (справа)
В сравнение двух функций выше, мы видим, что применяя параметр opacity, мы задаем прозрачность конкретному элементу, а также всем, которые находятся внутри него. RGBA, в свою очередь, позволяет нам применять прозрачность к отдельным элементам, и прозрачность не распространяется на элементы, которые относятся к нему. Отсюда следует, что текст и изображения видны хорошо, и только лишь фон становится прозрачным.
Совместимость с браузерами
Теперь вопрос относительно совместимости с браузерами. Как же быть с недостатками IE и более ранними версиями остальных браузеров? Вероятно, следует воспользоваться статичными цветами или применять прозрачное PNG-изображение. Мы также можем воспользоваться селектором браузеров от Рафаэля Лимы – javascript-код в 1кб, который позволяет нам применять отдельные стили css к определенным браузерам.
В заключение
Если вы готовы удивить ваших посетителей, использующий современные браузеры, но и при этом постараться не оставить в обиде тех, у кого все еще старые браузеры, то не забудьте воспользоваться ресетом стилей. Убедите своих пользователей, что уже давно пора переходить на изучение целого ряда возможностей веб-индустрии, начиная с RGBA и Opacity.
