Color, Filters, and Other Style Sheet Properties

filter (old style)
IE 4(Win) NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: No

Sets the visual, reveal, or blend filter used to display or change content of an element. A visual filter can be applied to an element to produce effects such as content flipping, glow, drop shadow, and many others. A reveal filter is applied to an element when its visibility or appearance changes. The value of the reveal filter determines what visual effect is to be applied to the transition from hidden to shown (or vice versa). This includes effects such as wipes, blinds, and barn doors. A blend filter sets the speed at which a transition between visibility states occurs.

CSS Syntax

filter: filterType1(paramName1=value1, paramName2=value2,...)
       filterType2(paramName1=value1,...) ...

Value

Each filter property may have more than one space-delimited filter type associated with it. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. See the “Notes” section below for details on filterType  values and parameters.

Initial Value         None.

Example        .fastStuff {filter: blur(add=true, direction=225)}

Applies To

body , button , img , input , marquee , table , td , textarea , tfoot , th , thead , tr , and absolute-positioned div and span elements.

Object Model Reference

[window.]document.getElementById("elementID").filters["filterName"]

Notes

First-generation filters (which continue to be supported at least through IE 7) are divided into three broad categories: visual, reveal, and blend. Each category has its own parameter names. You can mix categories within a single filter property assignment and have quite a bit of fun experimenting with the combinations. Observe carefully the limitations about the elements to which you may assign filters.

The visual filters and their parameters are as follows:

alpha()

Controls transparency level. The opacity and finishopacity parameters can be set from transparent ( 0 ) to opaque ( 100 ). The style parameter sets the opacity gradient shape: uniform ( 0 ), linear ( 1 ), radial ( 2 ), or rectangular ( 3 ). startX and startY set the horizontal and vertical coordinates for opacity gradient start, whereas finishX and finishY set the horizontal and vertical coordinates for opacity gradient end.

blur()

Gives the element the appearance of motion. The add parameter specifies whether to add the original image to the blurred image ( 1 ) or to omit it ( 0 ). direction sets the angle of the blurred image relative to the original image location: above ( 0 ; above-right ( 45 ); right ( 90 ); below-right ( 135 ); below ( 180 ); below-left ( 225 ); left ( 270 ); above-left ( 315 ). strength indicates the number of pixels for the blurred image to extend.

chroma()

Sets a color transparent. The color parameter specifies the hexadecimal triplet value of the color to be made transparent.

dropShadow()

Creates an offset shadow for apparent depth. The color parameter sets the hexadecimal triplet value of color for drop shadow. offx and offy specify the number of pixels between the element and the drop shadow along the x and y axes (positive values to the right/down; negative to the left/up). The positive parameter specifies whether only positive pixels generate drop shadows ( 1 ) or transparent pixels as well ( 0 ).

flipH()

Creates a horizontally mirrored image of the element.

flipV()

Creates a vertically mirrored image of the element.

glow()

Adds radiance to outer edges. The color parameter sets the hexadecimal triplet value of the color for the radiance effect and strength sets the radiance intensity ( 1-255 ).

gray()

Removes colors but retains luminance.

invert()

Reverses the hue, saturation, and brightness (HSV) levels.

light()

Shines a light source on the element (numerous filter method calls are available to set specific types of light sources, locations, intensities, and colors).

mask()

Creates a transparent mask. The color parameter sets the hexadecimal triplet value of the color applied to transparent regions.

shadow()

Displays the element as a solid silhouette. The color parameter sets the hexadecimal triplet value of the color used for shadows and direction sets the angle of the shadow relative to the original image location: above ( 0 ); above-right ( 45 ); right ( 90 ); below-right ( 135 ); below ( 180 ); below-left ( 225 ); left ( 270 ); above-left ( 315 ).

wave()

Renders the element with a sine wave distortion along the x-axis. The add parameter specifies whether to add the original image to waved image ( 1 ) or not ( 0 ). freq sets the number of waves to be applied to visual distortion, light sets the light strength ( 0- 100 ), phase sets the percentage offset for the sine wave ( 0-100 corresponding to to 360 degrees), and strength sets the wave effect intensity ( 0-255 ).

xRay()

Renders only the edges.

filter (new style)

The blend and reveal transition filters and parameters are as follows:

blendTrans()

Fades the element in or out. The duration parameter sets the floating-point value ( seconds.milliseconds ) of how long the transition effect should take.

revealTrans()

Sets a transition effect between appearance states of an element. The duration param eter sets the floating-point value (seconds.milliseconds ) of how long the transition effect should take. transition is a key integer that corresponds to one of the following transition types.

Both transition filters have a set of three methods: apply() , play() , and stop() . Use apply() to freeze the element’s display while you change the element’s visibility or other visual property; then invoke the play() method on the filter to let the transition be seen by the user:

  document.getElementById("myImg").filters["revealTrans"].apply() ;
  document.getElementById("myImg").src = "newPix.jpg";
  document.getElementById("myImg").filters["revealTrans"].play();

A style sheet rule for the element may have been set to the following:

  img {filter: revealTrans(transition=2, duration=3)}

When the script statements execute, the change from one image to another occurs through a “circle in” reveal transition.

filter (new style)
IE 5.5 NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: No

Sets the static or transition filter used to display or change content of an element with the help of the DXImageTransform ActiveX control, delivered with IE 5.5 or later for Windows. The purpose of the new filter mechanism is the same as the old style one, but the syntax for invoking the ActiveX control is new, as are many of the filter names.

Alphabetical Property Reference

CSS Syntax

filter: progid:DXImageTransform.Microsoft.filterType1(paramName1=value1,
paramName2=value2,...) progid:DXImageTransform.Microsoft.filterType2(paramName1=value1,...) ...

Value

Each filter type must be preceded by the reference to the ActiveX control (progid: DXImageTransform.Microsoft.), and multiple filter types for a single filter style property are space delimited. Each filter type is followed by a pair of parentheses, which may convey parameters about the behavior of the filter for the current element. A parameter generally consists of a name/value pair, with assignment performed by the equals symbol. Filter types that control transitions also have methods that scripts invoke to freeze the display while some visible property of the element changes (also under script control) and then play the transition. (See the “Notes” section below for information about filterType values and parameters.

Initial Value        None.

Example

.fastStuff {filter: progid:DXImageTransform.Microsoft.MotionBlur(add=1,
direction=225)}

Applies To           All elements.

Object Model Reference

[window.]document.getElementById("elementID").filters[
  "DXImageTransform.Microsoft.filterName"]

Notes

Documenting in detail ActiveX controls that work only on Windows versions of Internet Explorer exceeds the scope of this book. But by way of introduction to what the new filter scheme offers in IE 5.5 and later, the following table lists the static and trasition filters available in the DXImageTransform ActiveX control, along with descriptions of what they do. For specific details of properties that go into style sheet rules, as well as the scriptable properties and methods available to each filter, visit http://msdn.microsoft.com/workshop/ author/filter/filters.asp.

Successful deployment of these filters, especially on complex content, requires extensive experimentation and testing to make sure that your combination doesn’t crash the browser.

Please check back next week for the continuation of this article.