Браузер IE, начиная с версии 4, имеет специфическое CSS-свойство Filter, с помощью которого можно создать какой-либо визуальный эффект. Синтаксис использования CSS свойства Filter (фильтр) в IE имеет следующий вид.
Filter: <название фильтра> (<набор атрибутов>); // А также это css-свойство стало лучше и качественнее работать в CSS3
Атрибуты отделяются друг от друга символом «запятая». Объявление атрибута состоит из двух частей: названия атрибута и его значения, разделенных знаком «равно». Значение атрибута может быть взято в кавычки.
Кроме того начиная с версии IE 5.5 доступны и так называемые «трансформации», в этом случае имя фильтра необходимо использовать с «приставкой» progid:DXImageTransform.Microsoft.
Фильтр Alpha
- opacity – степень прозрачности в начальной точке градиента;
- finishOpacity – степень прозрачности в конечной точке градиента;
- style – тип градиента прозрачности: 0 – равномерный, 1 – линейный, 2 – радиальный, 3 – прямоугольный.
Пример использования данного фильтра css:
<img src=”img.jpg” style=”filter: alpha(style=2, opacity=50, finishOpacity=100)”> <!-- фильтр css alpha в ie -->
Применение фильтра Alpha под все популярные браузеры:
<style type="text/css">
a:hover img {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5; /* Mozilla Firefox 2.0, 3.0 */
-khtml-opacity: 0.5; /* Safari 1.1, 2.0, Google Chrome */
opacity: 0.5; /* CSS3 - Opera 9 */
filter: alpha(opacity=50); /* Internet Explorer (IE) 5.5, 6.0, 7.0 */
}
</style>
Фильтр DropShadow
CSS-фильтр dropShadow управляет эффектом отбрасываемой тени для элементов разметки HTML-документа. Имеет следующие атрибуты:
- color – цвет тени или маски;
- offx – смещение тени по оси x;
- offy – смещение тени по оси y;
- positive – тип фильтра: 0 – маска и 1 – тень;
Пример:
<div style=”filter: dropShadow(color= black, positive=1); width: 200px;”>DropShadow</div>
Динамические фильтры в CSS
Slide
Динамический фильтр Slide создает эффект смены слайда, при котором новый слайд проявляется путем сдвига всего старого слайда новым или путем сдвига секции старого слайда секциями нового , причем соседние секции двигаются в противоположные стороны. Фильтр имеет следующий синтаксис:
- bands – количество полос, которыми реализуется смена кадров;
- duration – длительность в формате «секунды.миллисекунды» (0.0767)
-
slideStyle – тип замены старого слайда новым:
- hide – новый слайд закрывает старый;
- push – новый слайд «толкает» старый;
- swap – смена слайда происходит по секциям;
Пример трансформации на CSS и JS в Internet Explorer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Webering">
<title> CSS, CSS3 фильтр Slide, фильтры css ie</title>
<style type="text/css">
DIV {
position:absolute;
top: 20px; left: 20px;
width: 300px; height: 200px;
}
#slideContainer {
top: 20px; left: 20px;
width: 320px; height: 220px;
}
</style>
<script type="text/javascript">
var state = 0;
function move() {
slideContainer.filters[0].Apply();
if (state == 0) {
state = 1;
slide1.style.visibility = "hidden";
slide2.style.visibility = "visible";
} else {
state = 0;
slide1.style.visibility = "visible";
slide2.style.visibility = "hidden";
}
slideContainer.filters[0].Play();
setTimeout('move()', 3000);
}
</script>
</head>
<body onload="move();">
<div id="slideContainer"
style="filter:progid:DXImageTransform.Microsoft.Slide(slideStyle='SWAP', bands=0);">
<div id="slide1" style="background:gold">
Продажник
</div>
<div id="slide2" style="visibility:hidden; background: yellowgreen;">
Продвиженец
</div>
</div>
</body>
</html>
