ВЕБ-ШКОЛА: Фильтры и превращения. Свойства и методы.

РЕКЛАМА

Разное

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

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 управляет степенью видимости объекта.

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

style (ч/з) – вид градиента прозрачности. Возможные значения (целые числа):
0 – градиента нет (значение по умолчанию).
1 – линейный градиент.
2 – радиальный градиент.
3 – градиент по четырехугольнику (rectangle gradient).
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:100; height:100;

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:70; height:70;

filter:alpha(opacity=0, finishOpacity=100, дальнейшие параметры в примерах);">

</span>

6. style=2 7. style=3

Примечания.

Отрисовка градиентными методами более плавна для небольших объектов. Для протяженных объектов видна дискретность прорисовки.
Хотя в MSDN Library (справке по продуктам Microsoft) и говорится, что свойства finishX, finishY, startX, startY используются для всех градиентных методов, на самом деле (по крайней мере для MSIE4.0) они не влияют на эффекты со style=2 и 3.
Свойства finishX, finishY, startX, startY задаются в процентах!!! (В MSDN Library утверждается, что они задаются в пикселах).
По MSDN Library: незаданные свойства finishX, finishY, startX, startY не имеют значений по умолчанию. Однако, если сравнить примеры 1 и 5, 2 и 3, то станет ясно, что на самом деле значения по умолчанию startX=0, finishX=100.
Неверно заданные свойства opacity, finishOpacity, finishX, finishY, startX, startY устанавливаются в 100. [> далее >]