—»     —»   RGBa против Opacity: учимся понимать разницу
  Раздел: CSS/Style Sheets   Комментариев: 4  

RGBa против Opacity: учимся понимать разницу

Каждый веб-дизайнер видит в своих мечтах, что можно свободно управлять прозрачностью конкретных элементов веб-страницы посредством CSS и HTML. Потому что, применяя различные уровни прозрачности, они могли бы создавать гораздо более привлекательные веб-сайты, затрачивая при этом меньше сил и времени. Теперь, с появлением CSS3, мы можем реализовывать это посредством RGBa или параметра Opacity.

Что такое 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.

RGBa против Opacity: учимся понимать разницу

Пример кода 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; }

RGBa против Opacity: учимся понимать разницу

Пример кода 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 (справа)

RGBa против Opacity: учимся понимать разницу
RGBa против Opacity: учимся понимать разницу

В сравнение двух функций выше, мы видим, что применяя параметр opacity, мы задаем прозрачность конкретному элементу, а также всем, которые находятся внутри него. RGBA, в свою очередь, позволяет нам применять прозрачность к отдельным элементам, и прозрачность не распространяется на элементы, которые относятся к нему. Отсюда следует, что текст и изображения видны хорошо, и только лишь фон становится прозрачным.

Совместимость с браузерами

Теперь вопрос относительно совместимости с браузерами. Как же быть с недостатками IE и более ранними версиями остальных браузеров? Вероятно, следует воспользоваться статичными цветами или применять прозрачное PNG-изображение. Мы также можем воспользоваться селектором браузеров от Рафаэля Лимы – javascript-код в 1кб, который позволяет нам применять отдельные стили css к определенным браузерам.

В заключение

Если вы готовы удивить ваших посетителей, использующий современные браузеры, но и при этом постараться не оставить в обиде тех, у кого все еще старые браузеры, то не забудьте воспользоваться ресетом стилей. Убедите своих пользователей, что уже давно пора переходить на изучение целого ряда возможностей веб-индустрии, начиная с RGBA и Opacity.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 16082   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 21 сентября 2010 @ 13:24
Написал: Dzedzik — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Долго искал такую статью, где объясняют как фон сделать прозрачным, а дочерние элементы при этом остаются полностью видимыми. А то при помощи opacity никак не получалось.. Уж думал и нет такого) Спасибо большое, очень пригодилось!!!
Комментарий #2: 21 сентября 2010 @ 15:03
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
Dzedzik, пожалуйста smile
Комментарий #3: 17 июля 2011 @ 18:58
Написал: Yakim — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Уровень прозрачности варьируется от 0 (полное отображение) до 1 (полностью прозрачен).


Как раз наоборот. Opacity - непрозрачность.
Комментарий #4: 27 октября 2011 @ 13:56
Написал: Bars — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Как раз наоборот. Opacity - непрозрачность.

Конечно.
0 – полностью прозрачен;
1 – полное отображение.

А залез я сюда узнать, есть ли возможность указать значение альфа-канала, указывая при этом значение цвета в hex? Что-то типа:
color: #00000099
или
color: (FFF, .5)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031