Статья по CSS. Прозрачность в CSS

[SLITE]

[attachment=2]1262699167_pre.jpg[/attachment]
Здравствуйте, Уважаемые посетители Российской школы CSS! Сегодня я расскажу вам об одном из самых эффектных атрибутов CSS - прозрачности (opacity). Мы рассмотрим принципы применения атрибута и добьёмся максимальной его кросс-браузерности. Также, в статье будут рассмотрены дизайнерские приемы с использованием прозрачности. Для демонстрации работы opacity лучше всего использовать изображение. В этой статье - будем использовать мой аватар, который без прозрачности выглядит так:
[attachment=1]1262700226_rcs.jpg[/attachment]
Начнем с описания атрибута opacity. Этот атрибут (свойство) включен W3C в рекомендации для CSS3. Значениями атрибута могут быть только числа от 0 до 1. Здесь - 0 означает полную прозрачность (невидимость) объекта, а 1 - стандартное состояние, без прозрачности. Свойство может быть применено к любому объекту. Пример использования:

Код: Выделить всё

opacity: 0.5;

Если преминем это свойства к нашей подопытной картинке, получим такой эффект:[attachment=0]1262700335_rcs2.jpg[/attachment]
Данный атрибут не входит в список рекомендуемых для 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