Filter

filter Support Key: [*IE4*]	Other Dynamic Content Properties
	accelerator cursor behavior zoom
= Index DOT Css by Brian Wilson =

Quick Statistics
Default Value:		NA
Applicable Elements:		BODY, BUTTON, IMG, INPUT, MARQUEE, TABLE, TD, TEXTAREA, TFOOT, TH, THEAD and TR. [See additional Notes below.]
Inherit From Parent:		NA
Applicable Media:		Currently Visual only
HTML Equivalent:		NA
Official Docs:		Microsoft MSDN Reference

What is it?: 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: Description:
Visual filters allow one or more of 14 visual effects to be applied to an element's content.; Syntax:
Selector { filter: [Visual filter name]([filter parameter1], [filter parameter2],...) }; [Visual filter name] - See the Visual filter syntax details page for more information on allowed visual effects.

Reveal Transition Filters: Description:
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.; Syntax:
Selector { filter: revealtrans([duration], [transition-type]) }; [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: Description:
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.; Syntax:
Selector { filter: blendTrans(Duration=[duration]) }; [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.)

General Syntax: Selector { filter: filtertype1(parameter1, parameter2,...) [filtertype2(parameter1, parameter2,...)]... }

Example: Ext/Doc: img { filter: blur(strength=50) flipv() }; In-Line: <img SRC="image.gif" STYLE="filter: blur(strength=50) flipv()">

Notes

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.)

Browser Peculiarities