Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим. Вдобавок рассмотрим готовое решение постепенного изменения прозрачности с помощью javascript.
CSS opacity (CSS прозрачность) W3C в своей рекомендации CSS3 определяет свойство opacity для применения эффекта прозрачности к элементам страницы. Значением данного свойства является число в диапазоне от 0.0 до 1.0. При значении равном нулю элемент становится полностью прозрачным, а при значении равном единице, соответственно, совсем не прозрачным. Свойство можно применять к любым элементам страницы. Пример (задана прозрачность 0.2, 0.5 и 1.0): .img1 { opacity: 0.2; } .img2 { opacity: 0.5; } .img3 { opacity: 1.0; } Нравится? Да? Так что самое время подпортить настроение. Понятное дело, что разные браузеры по-разному реализуют данное свойство: кто вообще не реализует, кто реализует, используя свое собственное название для данного свойства, а кто фильтры использует. Браузеры поддерживающие CSS3 opacityПонимают CSS3 свойство opacity следующие браузеры: Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9. Для установки прозрачности через скрипт используем: object.style.opacity Mozilla 1.6 и ниже, Firefox 0.8Старые Mozilla и Firefox 0.8 используют своё название данного свойства: -moz-opacity Для установки прозрачности через скрипт используем: object.style.MozOpacity Safari 1.1, Konqueror 3.1Данные товарищи, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity Для установки прозрачности через скрипт используем: object.style.KhtmlOpacity Однако, имейте ввиду, что данное свойство доступно лишь в данных версиях этих браузеров. Safari с версии 1.2 использует CSS3 opacity, но при этом Konqueror старше версии 3.1, перестав поддерживать -khtml-opacity, не ввел поддержку CSS3 opacity. В январе 2003 года корпорация Apple представила новый браузер для Mac OS X, основанный на движке KHTML, Safari. Благодаря лицензии, на условиях которой распространяется KHTML, все изменения, вносимые в него разработчиками Apple, публикуются в виде патчей, которые, после пересмотра, добавляются в основную ветку KHTML. Причиной по которой Konqueror утратил возможность реализации эффекта прозрачности как раз и заключается во внесение в ядро KHTML патчей от Safari, т.к. Safari использует возможности присутствующие в Mac OS X, но которых нет в KDE. Конечно рано или поздно эта ситуация будет исправлена, но на данный момент в последней версии 3.5 ситуация остается прежней. Internet Explorer 5.5+Данный браузер, начиная с версии 5.5 и включая последнюю на сегодняшний день версию Internet Explorer 7, реализует прозрачность через Alpha DirectX фильтр. Стоит отметить, что данный фильтр использует значение прозрачности в диапазоне от 0 до 100 (а не от 0.0 до 1.0). Так же отмечу, что фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true. Пример (устанавливаем прозрачность на половину): .img1 { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); } .img2 { filter: alpha(opacity=50); } Для установки прозрачности через скрипт используем: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(строка параметров)". Для получения прозрачности аналогичной прозрачности W3C используем в качестве строки параметров значение "opacity=число от 0 до 100". Описание всех параметров смотрите на странице описания фильтра. Так же очень важно знать следующее: с выходом Windows XP появилось сглаживание экранных шрифтов методом ClearType, а вместе с ним и побочные эффекты в IE при использовании этого метода сглаживания; в нашем случае, если применяется прозрачность к элементу с текстом при включенном методе сглаживания ClearType, то текст перестает нормально отображаться (полужирный текст - bold, например, двоится, могут так же появляться различные артефакты, например в виде чёрточек). Для того чтобы исправить положение, для IE нужно задать фоновый цвет, CSS свойство background-color, элементу к которому применяется прозрачность. К счастью в IE7 баг устранен. CSS opacity симбиозПод симбиозом я подразумеваю объединение разных стилей для разных браузеров в одном CSS правиле для получения нужного эффекта, т.е. для реализации кросс-браузерности. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; По сути, нужными являются первое и последнее правила, для IE5.5+ и браузеров понимающих CSS3 opacity, а два правила по середине явно погоды не делают, но и не очень то и мешают (сами решайте, нужны ли они вам). Javascript opacity симбиозТеперь попробуем установить прозрачность через скрипт с учетом особенностей разных браузеров описанных выше. function setElementOpacity(sElemId, nOpacity) { var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId);
if (!elem || !opacityProp) return;
if (opacityProp=="filter") { nOpacity *= 100;
var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; } else elem.style[opacityProp] = nOpacity; }
function getOpacityProperty() { if (typeof document.body.style.opacity == 'string') return 'opacity'; else if (typeof document.body.style.MozOpacity == 'string') return 'MozOpacity'; else if (typeof document.body.style.KhtmlOpacity == 'string') return 'KhtmlOpacity'; else if (document.body.filters && navigator.appVersion.match(/MSIE ([d.]+);/)[1]>=5.5) return 'filter';
return false; } Функция принимает два аргумента: sElemId - id элемента, nOpacity - вещественное число от 0.0 до 1.0 задающее прозрачность в стиле CSS3 opacity. Думаю, что стоит пояснить часть кода функции setElementOpacity относящуюся к IE. var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; Может возникнуть вопрос, а почему бы ни устанавливать прозрачность путем присваивания (=) свойству elem.style.filter = '...'; ? Зачем используется "+=" для добавления в конец строки свойства filter? Ответ прост, для того чтобы не "затереть" другие фильтры. Но при этом, если добавить фильтр таким образом второй раз, то он не изменит ранее установленные значения этого фильтра, а будет просто добавлен в конец строки свойства, что не корректно. Поэтому, если фильтр уже установлен, то нужно им манипулировать через коллекцию примененных к элементу фильтров: elem.filters (но учтите, если фильтр ещё не был назначен элементу, то управлять им через данную коллекцию невозможно). Доступ к элементам коллекции возможен либо по имени фильтра, либо по индексу. Однако фильтр может быть задан в двух стилях, в коротком стиле IE4, или в стиле IE5.5+, что и учтено в коде. Плавное изменение прозрачности элементаГотовое решение. Используем библиотеку opacity.js <html> <head>
<style type="text/css"> img { filter:alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } </style>
<script type="text/javascript" src="/js/opacity.js"></script>
<script type="text/javascript">
fadeOpacity.addRule('oR1', .3, 1, 30); </script>
</head> <body>
<img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/strawberry.jpg" width="100" height="80" /> <img id="fImg2" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/tomato.jpg" width="82" height="100" /> <img id="fImg3" onMouseOver="fadeOpacity(this.id, 'oR1')" onmouseout="fadeOpacity.back(this.id)" src="/img/sweet_cherry.jpg" width="98" height="97" />
</body> </html> Основные шаги:- Подключаем библиотеку функций;
- Определяем правила;
- Вызываем метод fadeOpacity() для перетекания цвета от начального к конечному, или fadeOpacity.back() для возврата к начальному цвету.
РазжевываемКак подключать библиотеку, думаю, видно из примера выше. Теперь стоит пояснить определение правил. До того как вызывать методы плавного изменения прозрачности, нужно определить правила, по которым будет выполняться процесс: нужно определить начальную и конечную прозрачность, а также, при желании, указать параметр задержки, который влияет на скорость процесса смены прозрачности. Правила определяются с помощью метода fadeOpacity.addRule Синтаксис: fadeOpacity.addRule (sRuleName, nStartOpacity, nFinishOpacity, nDalay) Аргументы: - sRuleName - имя правила, задаётся произвольно;
- nStartOpacity и nFinishOpacity - начальная и конечная прозрачность, числа в диапазоне от 0.0 до 1.0 ;
- nDelay - задержка в миллисекундах (необязательный аргумент, по умолчанию равен 30).
Сам вызов фейдинга прозрачности делаем через методы fadeOpacity(sElemId, sRuleName), где sElemId это id элемента, а sRuleName имя правила. Для возврата прозрачности в исходное состояние используется метод fadeOpacity.back(sElemId). :hover для простой смены прозрачностиЕщё отмечу, что для простой смены прозрачности (но не постепенного её изменения) в самый раз подходит псевдо-селектор :hover, который позволяет определить стили для элемента, в момент наведения на него мыши. <style type="text/css"> a:hover img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; } </style>
<a href="javascript:void(0)"> <img src="/images/articles/strawberry.jpg" width="100" height="80" /> </a>
Обратите внимание, что картинка размещена внутри элемента A. Дело в том, что Internet Explorer вплоть до версии 6, понимает псевдо-селектор :hover, только применительно к ссылкам, а не к любым элементам, как положено в CSS (в IE7 положение исправлено). Прозрачность и зазубренный текст в IEНапоследок хочу сказать, применяя прозрачность к тексту большого размера в Internet Explorer, вы столкнетесь с тем, что этот текст будет зазубренным. Для устранения этого неприятного "спецэффекта" следует задать фон текстовому элементу, к которому применяется прозрачность, установив CSS cвойство background-color. Автор: Цыгырлаш Игорь tigir.com/opacity.htm
|