Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Статьи по CSS » Статья по CSS 10. Прозрачность в CSS
Не нравится(-) 15 Нравится(+)
5-01-2010, 18:30 - GZ Design (Статьи по CSS, jQuery)
Статья по CSS 10. Прозрачность в CSS

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


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

Если преминем это свойства к нашей подопытной картинке, получим такой эффект:
Статья по CSS 10. Прозрачность в CSS


Данный атрибут не входит в список рекомендуемых для 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
-----------------------------------
Перейти в категорию статей по CSS


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 25615 раз(а) и написали 11 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Май 2017    »
ПнВтСрЧтПтСбВс
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!