Здравствуйте, Уважаемые посетители Российской школы CSS! Сегодня я расскажу вам об одном из самых эффектных атрибутов 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: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
Итак, пришло время рассмотреть варианты дизайнерских приемов с использованием прозрачности.
1. Проявление прозрачного объекта при наведении мыши.
Для обеспечения кросс-браузерности, это должна быть ссылка. Можно сделать из объекта ссылку так:
Код: Выделить всё
<a href="#nogo">объект</a>
В 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;
}
Код: Выделить всё
.opacity {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
В 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;
}
Код: Выделить всё
<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