Прозрачность для всех браузеров методами CSS

Как помним, прозрачность (transparency) - это одна из тех вещей, которая отображается во всех браузерах по-разному. К счастью, чтобы избавиться от данного бага, нам будет достаточно прописать пару строк в CSS (в примере используется прозрачность в 50%)


.transparency_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
}


О каждом параметре по порядку:

• opacity: 0.5; - задает прозрачность для Firefox, Safari и Opera. Если бы все браузеры поддерживали стандарты, то мы вполне могли бы обойтись одной этой строкой, но увы… посему идем дальше
• filter:alpha(opacity=50); - установка прозрачности в IE. Да! В этот раз мы обойдем просто одной лишней строкой в коде, без подключения скриптов.
• -moz-opacity:0.5; - поддерживает прозрачность в старых версиях Mozilla. А вот здесь, конечно, обидно, что ради Мозилы, которая используется редко тоже приходится писать дополнительный код. Да, он не утяжеляет вес CSS-файла, но все равно не прикольно. Представьте, что вам надо определить прозрачность не один раз, а эдак 10, то получается 2 лишних строк кода (с учетом IE6).

Как видите, назначить прозрачность для блока так же легко, как и купить авто Чери. Гораздо труднее, как мы знаем разобраться с прозрачностью в PGN-файлах, тут уже без шаманского бубна вопрос решить будет сложно.

Главное не забудьте, что блок, к которому применяется прозрачность, должен иметь в css запись с указанием на ширину-высоту, иначе может не сработать.

Вот пару идей по поводу того, для чего нам это может пригодиться:

1. Использовать прозрачность для счетчиков в “подвале”, чтобы те не сильно привлекали внимание
2. Использовать прозрачность для фотогалерей, прописав к картинкам-ссылкам параметр a:hover. Таким образом мы получим дополнительную “анимацию” без использования flash, а значит не возникнет каких-либо проблем с индексацией, и страница не будет перегружена.
3. Использование прозрачности для всплывающих окон. Ну вы знаете эту вещь - когда допустим мы кликаем по ссылке “Обратная связь”, а поверх страницы возникает форма для отправки писем. при этом, чтобы акцентировать на ней внимание, все что находится ниже, как бы заливается черным цветом, н ос определенной прозрачностью. Правда как правило эта фишка используется в лайтбоксах. Таким образом текст не отвлекает внимание от рисунков.
4. Использовать прозрачность в слайдерах (часто используется на информационных сайтах в блоках с избранными новостями), когда фоном пускает фотография, поверх нее ставится дивник с черной заливкой и прозрачностью эдак 80%, а в дивнике уже идет как правило название и краткое описание к новости.

Спасибо за добавление статьи в: