Браузер 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 (CSS3)
Динамический фильтр Slide создает эффект смены слайда, при котором новый слайд проявляется путем сдвига всего старого слайда новым или путем сдвига секции старого слайда секциями нового , причем соседние секции двигаются в противоположные стороны. Фильтр имеет следующий синтаксис:
- bands – количество полос, которыми реализуется смена кадров;
- duration – длительность в формате «секунды.миллисекунды» (0.0767)
- slideStyle – тип замены старого слайда новым:
- hide – новый слайд закрывает старый;
- push – новый слайд «толкает» старый;
- swap – смена слайда происходит по секциям;
Пример трансформации на CSS в 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">
CSS фильтр №1
</div>
<div id="slide2" style="visibility:hidden; background: yellowgreen;">
CSS фильтр №2
</div>
</div>
</body>
</html>