This property creates an extensible mechanism allowing special visual
effects to be applied to content. There are currently three categories
of filters - Visual filters and Reveal/Blend Transition filters.
Multiple filters can be applied to a selector to produce interesting results,
with the order of application often playing an important role in the final
visual result. Current filters only apply in a visual context, but the
extensibility of the property could allow for other capabilities.
Visual filters allow one or more of 14 visual effects to be applied
to an element's content.
Reveal transition filters are time-varying visual filters allowing
content to be transformed in a prescribed manner. Their role is
to visually transition a control from one state to another.
Scripting languages must be used to change between the beginning and
ending states for the 23 possible Reveal transition types. Transition
filters can also be specified using syntax in the HTML META element
to create blend transitions between page loads.
[duration] - Floating point value representing
the length of time used for the transition. Value is given in seconds
and milliseconds (eg: 1.234 = 1,234 milliseconds.)
[transition-type] - Integer code value (0-23)
indicating the shape of the Reveal transition. See the
Reveal transition syntax details page
for more information on allowed transition shapes.
Blend Transition Filters
A Blend transition filter allows the content of an element to fade in
or out. The Blend transition filter can also be specified using syntax
in the HTML META element to create inter-page blend transitions.
Filters can also be applied to the DIV and SPAN elements
as well, but they must have an explicit height and width or have a
'position' property set to absolute.
Filter effects can take time to calculate; this can degrade perceived
page loading performance or interfere with content appearance when
selecting content (especially when applying multiple filter effects.)
Filter effects do not change or alter the content of an element, just
the visual appearance.
The visual effects of some filters (such as DropShadow or Glow) may extend
beyond the normal rendering region of an element box. If this is not
compensated for by appropriate margin property values, the element box
content may be clipped.
Filters are ignored for positioned elements nested inside nonpositioned
elements (eg: a positioned SPAN inside a nonpositioned DIV.) To ensure that
a filter is applied to an element, position or set the width of the outermost
element in the document tree.
The shadow filter can not be applied to the IMG element directly; it
needs to be applied to the parent element of the IMG element.
Some of the Visual filters (DropShadow, Glow, Mask and Shadow properties)
apply their effects only to transparent regions of an element box. Open
space inside, between and around text characters is automatically considered
transparent. With images, only some formats support transparency capability
(eg: Jpeg does not support transaparency, but Gif DOES only in the
Gif89a format with a transparent channel set.)