Сегодня я расскажу вам об одном из самых эффектных атрибутов CSS - прозрачности (opacity). Мы рассмотрим принципы применения атрибута и добьёмся максимальной его кросс-браузерности. Также, в статье будут рассмотрены дизайнерские приемы с использованием прозрачности. Для демонстрации работы opacity лучше всего использовать изображение. В этой статье - будем использовать мой аватар, который без прозрачности выглядит так: 
Начнем с описания атрибута opacity. Этот атрибут (свойство) включен W3C в рекомендации для CSS3. Значениями атрибута могут быть только числа от 0 до 1. Здесь - 0 означает полную прозрачность (невидимость) объекта, а 1 - стандартное состояние, без прозрачности. Свойство может быть применено к любому объекту. Пример использования: opacity: 0.5; Если преминем это свойства к нашей подопытной картинке, получим такой эффект: 
Данный атрибут не входит в список рекомендуемых для 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.
Пример реализации (получим тот же эффект, что и в первом примере):
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Opacity не работает в старых версиях и других браузеров и для обеспечения также применяются специальные скрипты. Для обеспечения полной (максимально возможной) кросс-браузерности прозрачности используется такая связка (для нашего примера):
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
Теперь прозрачность будет отлично работать практически во всех, даже не очень актуальных браузерах. Повторюсь, что конструкция не валидна.
Итак, пришло время рассмотреть варианты дизайнерских приемов с использованием прозрачности.
1. Проявление прозрачного объекта при наведении мыши.
Для обеспечения кросс-браузерности, это должна быть ссылка. Можно сделать из объекта ссылку так:
<a href="#nogo">объект</a>
Сделаем для нашей картинки такой переход от 0.5 к 1.0:
В HTML запишем код:
<a href="#nogo"><img src="rcs.jpg" height="150" width="150" alt="Аватар GZ Design'a" /></a>
Можно было записать и размеры в стили, но можно и так, как в примере. Запишем в таблицу стилей:
a {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
a:hover {
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
}
Действующая реализация приема - в "Демо".
2. Неплохо смотрятся полупрозрачные счетчики (можно и с переходом в полную непрозрачность при наведении мыши). Тут необходимо добавить к картинке счетчика класс (с учетом синтаксиса javascript). Стили будут теме же, что и в предыдущем пункте, только для класса и без ссылки.
Например:
.opacity {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
3. Полупрозрачные окна. Часто при выводе информации во всплывающем окне, его делают полупрозрачным. В данном случае, окно - блок, который должен находиться над прочим контентом (не забываем про z-index).
Пример:
В HTML записываем такое (для окна):
<div class="fly">Содержание окна</div>
В таблицу стилей пишем такое (например):
.fly {
position:absolute;
z-index:10;
top:10px;
left:10px;
width:300px;
height:200px;
padding:10px;
background:#dadfe3;
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
Результат, можно посмотреть в "Демо".
4. Одно из самых совершенных применений прозрачности. Мягкий переход объекта от полупрозрачного состояния к нормальному. Тут - существует несколько путей реализации: либо через специальную библиотеку opacity, либо через стандартную jQuery. Учитывая то, что на сайте, где необходим такой эффект как правило jQuery уже подключена, ей и воспользуемся.
Подключим библиотеку и запишем в HTML такой скрипт:
<script type="text/javascript" src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//settings
var opacity = 0.5, toOpacity = 1.0, duration = 400;
//set opacity ASAP and events
$('.opacity').css('opacity',opacity).hover(function() {
$(this).fadeTo(duration,toOpacity);
}, function() {
$(this).fadeTo(duration,opacity);
}
);
});
</script>
В этом стиле:
var opacity = 0.5 - начальная прозрачность
toOpacity = 1.0 - конечная прозрачность
duration = 400 - время перехода
Туда же запишем код нашей картинки:
<img src="rcs.jpg" alt="" class="opacity" />
Если не нужны дополнительные стили, CSS можно не писать. Эффект можно посмотреть в "Демо".
Источник css-school.ru
| 
