Домашние Картинки разработка веб-сайтов в Челябинске
(351) 777-94-64info@homepictures.ru
/Полезное/Статьи для веб-мастера/Мультимедийные эффекты для MS Internet Explorer/Свойства и методы фильтров

Свойства и методы фильтров

Фильтры и превращения. Свойства и методы.

Microsoft Internet Explorer 4.0 (и выше) представляет для использования следующие фильтры и превращения:

Фильтры (filters): alpha, blur, chroma, dropShadow, flipH, flipV, glow, gray, invert, light, mask, redirect, shadow, wave, xray
Превращения (transitions): blendTrans, revealTrans

Фильтры и превращения имеют свойства и методы для управления их поведением. Способы задания и использования визуальных фильтров можно найти в первой главе.

Свойства и методы фильтров. Описание.

Все фильтры и превращения имеют одно общее свойство enabled отвечающее за "разрешенность" соответствующего визуального эффекта. Значение этого свойства равное true разрешает применение эффекта, иначе (при значении false) запрещает.

ALPHA

Фильтр alpha управляет степенью видимости объекта.

Свойства. (в скобках приведен тип доступа к переменной из сценария: ч – чтение; з – запись.)

Описание. Свойство непрозрачности (opacity) принимает значение в интервале 0..100 (0 – полностью прозрачный объект; 100 – полностью не прозрачный). Если стиль (style) фильтра равен 0 (нет градиента), то имеет значение только это свойство; другие свойства не имеют значение. Оно применяется ко всему объекту.

При других значениях style объект отрисовывается с соответствующим градиентом. При этом степень непрозрачности изменяется от начального уровня (opacity) до конечного (finishOpacity).

Линейный градиент (style=1) изменяет свойство непрозрачности фронтом из точки p1 (startX, startY) в точку p2(finishX, finishY). Для этого проводится отрезок (виртуально) из точки p1 в p2 и строятся перпендикуляры к этому отрезку в этих точка. Эти перпендикуляры и ограничивают эффект перехода фильтра alpha.

В случае радиального градиента (style=2) и градиента по четырехугольнику (style=3) эффект отображается из центра объекта к краям по окружности или по четырехугольнику соответственно.

Примеры. Ниже приводятся примеры для HTML-элемента SPAN

<span style="background-color:red; width:100px; height:100px;
  filter:alpha(opacity=0, finishOpacity=100, дальнейшие параметры в примерах);">
</span>

1.style=1, startY=0, finishY=100, startX=0, finishX=100 2.style=1 3.style=1, startX=0, finishX=100 4.style=1, startY=0, finishY=100, startX=finishX 5.style=1, startY=0, finishY=100

<span style="background-color:red; width:70px; height:70px;
  filter:alpha(opacity=0, finishOpacity=100, дальнейшие параметры в примерах);">
</span>

6.style=2 7.style=3

Примечания.

BLUR

Фильтр blur создает эффект движения объекта.

Свойства.

Описание. Работа фильтра заключается в сдвиге объекта так, что хвост следа оставался в направлении direction. Величина сдвига определается свойством strength. При этом изображения, соответствующие определенным фазам сдвига накладываются друг на друга, создавая впечатление размазанности (движения). В зависимости от свойства add на это полученное изображение можно наложить первоначальное (add=1). Это может быть необходимым, потому что при значениях свойства strength больших 15..20 текст становиться практически нечитаемым.

Примеры. Ниже приводятся примеры для SPAN

<span style="width:100%; background-color:yellow; color:blue; font-size:24pt; text-align:center;
  filter:blur(параметры в примерах);">
</span>

blur() blur(strength=5) blur(add=0,strength=10) blur(add=1,strength=10) blur(direction=45, strength=10)

Примечания.

CHROMA

Фильтр chroma переводит определенный цвет изображения в прозрачный (transparent).

Свойства.

Примеры. Ниже приводятся примеры для SPAN

<span style="width:100%; color:blue; font-size:24pt; text-align:center;">
</span>
без фильтра chroma фильтр chroma(color=blue)

Примечания.

DROPSHADOW

Фильтр dropShadow отображает силуэт определенного цвета для выбранного объекта, создавая иллюзию, что объект находится над страницей, отбрасывая тень.

Свойства.

Примеры. dropShadow(Color=gold,offX=3,offY=3, positive=1)

background-color:red color:red
dropShadow(Color=gold,offX=2,offY=2, positive=0)

Примечания.

FLIPH / FLIPV

Фильтр flipH отражает объект симметрично центральной вертикальной оси (вдоль горизонтальной плоскости).

Фильтр flipV отражает объект симметрично центральной горизонтальной оси (вдоль вертикальной плоскости).

Свойства. нет

Примеры.

flipH: filter:flipH()
flipV: filter:flipV()

Примечания.

GLOW

Фильтр glow создает для объекта эффект сияния (или, буквально, сильного жара, раскаленности).

Свойства.

Примеры.

glow(Color=orange)
glow(Color=orange, Strength=5)
glow()

Примечания.

GRAY

Фильтр gray отображает объект в градациях серого

Свойства. нет

Примеры.

без фильтра gray с фильтром gray

INVERT

Фильтр invert обращает цвета объекта

Свойства. нет

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

style="color:#00ACFF; filter:invert();"
style="color:#FF5300"

Примечания.

LIGHT

Фильтр light моделирует освещение объекта различными источниками цвета. Т.к. описание свойств фильтра достаточно объемно, оно вынесено на отдельную страницу (см. light).

MASK

Фильтр mask отображает прозрачные (transparent) символы определенным цветом, а непрозрачные делает прозрачными.

Свойства.

Примеры.

без фильтра mask фильтр mask(color=blue)

Примечания.

REDIRECT

Фильтр redirect конвертирует объект в DAImage-объект, т.е. в изображение, которым может манипулировать Microsoft DirectAnimation.

Свойства. нет

Методы.

Примечание.

SHADOW

Фильтр shadow отрисовывает в определенном направлении "боковые" грани объекта, создавая впечатление объемности объекта.

Свойства.

Примеры. shadow() shadow(Color=gold) shadow(color=gold, direction=225)

Примечания.

WAVE

Фильтр wave выполняет синусоидальное преобразование объекта вдоль вертикальной оси.

Свойства.

Примеры.

wave() wave(add=1, strength=1) wave(strength=3) wave(strength=3, lightStrength=100) wave(strength=3, lightStrength=50) wave(strength=3, lightStrength=50, freq=3)

Примечания.

XRAY

Фильтр xray изменяет глубину цвета объекта и отрисовывает черно-белым, делая его похожим на рентгеновский снимок.

Свойства. нет

Примеры.

без фильтра xray с фильтром xray

Примечания.

В начало: Создание визуальных эффектов фильтрами и превращениями

Далее: Описание свойств и методов визуальных превращений