Сегодня я расскажу вам об одном из самых эффектных атрибутов CSS - прозрачности (opacity). Мы рассмотрим принципы применения атрибута и добьёмся максимальной его кросс-браузерности. Также, в статье будут рассмотрены дизайнерские приемы с использованием прозрачности. Для демонстрации работы opacity лучше всего использовать изображение. В этой статье - будем использовать мой аватар, который без прозрачности выглядит так:



Начнем с описания атрибута opacity. Этот атрибут (свойство) включен W3C в рекомендации для CSS3. Значениями атрибута могут быть только числа от 0 до 1. Здесь - 0 означает полную прозрачность (невидимость) объекта, а 1 - стандартное состояние, без прозрачности. Свойство может быть применено к любому объекту. Пример использования:



Если преминем это свойства к нашей подопытной картинке, получим такой эффект:



Данный атрибут не входит в список рекомендуемых для CSS 2.1. Это значит, что таблица стилей, использующая это свойство не будет валидна по версии CSS 2.1. Плохо, конечно, но это - не самая большая проблема. Хуже всего то, что объекты со стилем opacity будут неправильно отображаться в старых и "особенных" браузерах (включая Internet Explorer 6 и 7).
Разумеется, варианты использования прозрачности для этих браузеров существуют (замечу сразу, что они не валидны по версии W3C, но работают замечательно).

Рассмотрим вариант реализации прозрачности в старых версиях Internet Explorer (5.5 - 7). Прозрачность в IE задавалась через Alpha DirectX фильтр. Данный фильтр принимает значения прозрачности в диапазоне от 0 до 100 (а не от 0 до 1). Использование Alpha DirectX предполагает наличия у объекта определенных атрибутов: установленный height или width, или установленный атрибут position со значением absolute, или атрибут writingMode со значением tb-rl, или с contentEditable установленным значением true.
Пример реализации (получим тот же эффект, что и в первом примере):



Opacity не работает в старых версиях и других браузеров и для обеспечения также применяются специальные скрипты. Для обеспечения полной (максимально возможной) кросс-браузерности прозрачности используется такая связка (для нашего примера):



Теперь прозрачность будет отлично работать практически во всех, даже не очень актуальных браузерах. Повторюсь, что конструкция не валидна.

Итак, пришло время рассмотреть варианты дизайнерских приемов с использованием прозрачности.
1. Проявление прозрачного объекта при наведении мыши.
Для обеспечения кросс-браузерности, это должна быть ссылка. Можно сделать из объекта ссылку так:



Сделаем для нашей картинки такой переход от 0.5 к 1.0:
В HTML запишем код:



Можно было записать и размеры в стили, но можно и так, как в примере. Запишем в таблицу стилей:



Действующая реализация приема - в "Демо".

2. Неплохо смотрятся полупрозрачные счетчики (можно и с переходом в полную непрозрачность при наведении мыши). Тут необходимо добавить к картинке счетчика класс (с учетом синтаксиса javascript). Стили будут теме же, что и в предыдущем пункте, только для класса и без ссылки. Например:



3. Полупрозрачные окна. Часто при выводе информации во всплывающем окне, его делают полупрозрачным. В данном случае, окно - блок, который должен находиться над прочим контентом (не забываем про z-index). Пример:
В HTML записываем такое (для окна):



В таблицу стилей пишем такое (например):



Результат, можно посмотреть в "Демо".

4. Одно из самых совершенных применений прозрачности. Мягкий переход объекта от полупрозрачного состояния к нормальному. Тут - существует несколько путей реализации: либо через специальную библиотеку opacity, либо через стандартную jQuery. Учитывая то, что на сайте, где необходим такой эффект как правило jQuery уже подключена, ей и воспользуемся. Подключим библиотеку и запишем в HTML такой скрипт:



В этом стиле:
var opacity = 0.5 - начальная прозрачность
toOpacity = 1.0 - конечная прозрачность
duration = 400 - время перехода

Туда же запишем код нашей картинки:



Демо

По материалам сайта: Российская школа CSS, автор статьи Григорий Загребельный