Продвижение сайтов
Контекстная реклама
Таргетинговая реклама
Digital Agency
SERM
Фильтры CSS в IE

11 ноября 2007


Браузер IE, начиная с версии 4, имеет специфическое CSS-свойство Filter, с помощью которого можно создать какой-либо визуальный эффект. Синтаксис использования CSS свойства Filter (фильтр) в IE имеет следующий вид.

[code]
Filter:  <название фильтра> (<набор атрибутов>); // А также это css-свойство стало лучше и качественнее работать в CSS3
[/code]

Атрибуты отделяются друг от друга символом «запятая». Объявление атрибута состоит из двух частей: названия атрибута и его значения, разделенных знаком «равно». Значение атрибута может быть взято в кавычки.

Кроме того начиная с версии IE 5.5 доступны и так называемые «трансформации», в этом случае имя фильтра необходимо использовать с «приставкой» progid:DXImageTransform.Microsoft.

Фильтр Alpha

  • opacity – степень прозрачности в начальной точке градиента;
  • finishOpacity – степень прозрачности в конечной точке градиента;
  • style – тип градиента прозрачности: 0 – равномерный, 1 – линейный, 2 – радиальный, 3 – прямоугольный.

Пример использования данного фильтра css:

[code]
<img src=”img.jpg” style=”filter: alpha(style=2, opacity=50, finishOpacity=100)”> <!-- фильтр css alpha в ie -->
[/code]

Применение фильтра Alpha под все популярные браузеры:

[code]
<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>
[/code]

Фильтр DropShadow

CSS-фильтр dropShadow управляет эффектом отбрасываемой тени для элементов разметки HTML-документа. Имеет следующие атрибуты:

  • color – цвет тени или маски;
  • offx – смещение тени по оси x;
  • offy – смещение тени по оси y;
  • positive – тип фильтра: 0 – маска и 1 – тень;

Пример:

[code]
<div style=”filter: dropShadow(color= black, positive=1); width: 200px;”>DropShadow</div>
[/code]

Динамические фильтры в CSS

Slide

Динамический фильтр Slide создает эффект смены слайда, при котором новый слайд проявляется путем сдвига всего старого слайда новым или путем сдвига секции старого слайда секциями нового , причем соседние секции двигаются в противоположные стороны. Фильтр имеет следующий синтаксис:

  • bands – количество полос, которыми реализуется смена кадров;
  • duration – длительность в формате «секунды.миллисекунды» (0.0767)
  • slideStyle – тип замены старого слайда новым:
    • hide – новый слайд закрывает старый;
    • push – новый слайд «толкает» старый;
    • swap – смена слайда происходит по секциям;

Пример трансформации на CSS и JS в Internet Explorer:

[code]
<!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>
[/code]

Наши клиенты

FitHealth
ActiveFitness
Airline
БалтАвтоТрейд BMW
Мостострой №6
FunJump
Emex
БалтАвтоТрейд Volkswagen
Fun City
iShop
  • Звоните!

    +7 (812) 318-40-34
  • Пишите!

    info@webering.ru
  • Приезжайте!

    Пожалуйста, предварительно позвоните нам и договоритесь о времени встречи.

  • г. Санкт-Петербург, ул. Седова, д. 11, лит. А, оф. 815 БЦ «Эврика»

  • Наш офис расположен в 5 минутах от станции метро «Елизаровская» в бизнес-центре «Эврика».

Отправить заявку

Бюджет: 20000 Р