/Полезное/Статьи для веб-мастера/Мультимедийные эффекты для MS Internet Explorer/Свойства и методы фильтров/Полезное/Статьи для веб-мастера/Мультимедийные эффекты для 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 управляет степенью видимости объекта.
Свойства. (в скобках приведен тип доступа к переменной из сценария: ч – чтение; з – запись.)
style (ч/з) – вид градиента прозрачности. Возможные значения (целые числа):opacity (по умолчанию 100), finishOpacity (по умолчанию 0) (ч/з) – степени непрозрачности.
finishX, finishY (ч/з) – x и y-координаты точки, где градиент заканчивается.
startX, startY (ч/з) – x и y-координаты точки, где градиент начинается.
Описание. Свойство непрозрачности (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 создает эффект движения объекта.
Свойства.
add (ч/з) – свойство, которое показывает, будет ли добавляться первоначальное изображение к изображению, полученному после применения фильтра. Принимает значение true(1) (значение по умолчанию) и false(0).
direction (ч/з) – направление, против которого происходит "движение". Отсчитывается от 12 часов по часовой стрелке. Допустимые значения кратные 45o (т.е. 0, 45, 90, 135, 180, 225, 270 (значение по умолчанию), 315).
strength (ч/з) – интенсивность фильтра. Допустимые значения (1..100).
Описание. Работа фильтра заключается в сдвиге объекта так, что хвост следа оставался в направлении 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(add=0,strength=10) blur(add=1,strength=10) blur(direction=45, strength=10)
Примечания.
Фильтр chroma переводит определенный цвет изображения в прозрачный (transparent).
Свойства.
color (ч/з) – цвет, с которым работает фильтр (задается по правилам HTML).Примеры. Ниже приводятся примеры для SPAN
<span style="width:100%; color:blue; font-size:24pt; text-align:center;">
</span>
Примечания.
Фильтр dropShadow отображает силуэт определенного цвета для выбранного объекта, создавая иллюзию, что объект находится над страницей, отбрасывая тень.
Свойства.
color (ч/з) – цвет падающей тени (задается по правилам HTML).offX,offY (ч/з) – смещение падающей тени от объекта вдоль осей x и y соответсвенно.positive (ч/з) – определяет, будет ли объект отбрасывать тень от прозрачных или непрозрачных пикселов. Принимает значение false(0) и true(1 – по умолчанию) соответственно.Примеры. dropShadow(Color=gold,offX=3,offY=3, positive=1)
Примечания.
Фильтр flipH отражает объект симметрично центральной вертикальной оси (вдоль горизонтальной плоскости).
Фильтр flipV отражает объект симметрично центральной горизонтальной оси (вдоль вертикальной плоскости).
Свойства. нет
Примеры.
flipH: filter:flipH()Примечания.
Фильтр glow создает для объекта эффект сияния (или, буквально, сильного жара, раскаленности).
Свойства.
color (ч/з) – цвет сияния (задается по правилам HTML).strength (ч/з) – интенсивность эффекта.Примеры.
glow(Color=orange)Примечания.
Фильтр gray отображает объект в градациях серого
Свойства. нет
Примеры.
без фильтра gray с фильтром grayФильтр invert обращает цвета объекта
Свойства. нет
Примеры. Ниже приводятся примеры с различными свойствами стилей, но одинаковым визуальным представлением
style="color:#00ACFF; filter:invert();"Примечания.
Фильтр light моделирует освещение объекта различными источниками цвета. Т.к. описание свойств фильтра достаточно объемно, оно вынесено на отдельную страницу (см. light).
Фильтр mask отображает прозрачные (transparent) символы определенным цветом, а непрозрачные делает прозрачными.
Свойства.
color (ч/з) – цвет маски (задается по правилам HTML).Примеры.
без фильтра mask фильтр mask(color=blue)Примечания.
Фильтр redirect конвертирует объект в DAImage-объект, т.е. в изображение, которым может манипулировать Microsoft DirectAnimation.
Свойства. нет
Методы.
elementImage() – возвращает объект Microsoft DirectAnimation image (DAImage).Примечание.
Фильтр shadow отрисовывает в определенном направлении "боковые" грани объекта, создавая впечатление объемности объекта.
Свойства.
color (ч/з) – цвет тени (задается по правилам HTML).direction (ч/з) – направление, против которого происходит "движение". Отсчитывается от 12 часов по часовой стрелке. Допустимые значения кратные 45o (т.е. 0, 45, 90, 135, 180, 225, 270, 315).Примеры. shadow() shadow(Color=gold) shadow(color=gold, direction=225)
Примечания.
Фильтр wave выполняет синусоидальное преобразование объекта вдоль вертикальной оси.
Свойства.
add (ч/з) – определяет, будет накладываться первоначальное изображение, на изображение с примененным эффектом (подробнее см. blur).freq (ч/з) – целое число волн на изображениеlightStrength (ч/з) – контрастность (%) при переходе от минимума к максимуму волны (0 – низшая контрастность (нет контрастности), 100 – высшая контрастность (цвет в минимуме черный)).phase (ч/з) – фаза синусоиды в %. 0% = 100% = 2π. (по умолчанию 0%)strength (ч/з) – амплитуда синусоиды (1..100). Примеры.
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Примечания.
В начало: Создание визуальных эффектов фильтрами и превращениями