Below is a table of style properties and values for filtering. (I've included here only properties now supported by Internet Explorer and Netscape -- I'll add others when they are supported)
(note that filtering as implemented in IE 4.0 appears to work only if you specify the filtering properties in a class [e.g .dropshadow] and access them through a TD, DIV, or SPAN tag with the appropriate class attribute. Also you need to set positioning, height, and width properties to make some of the filters work.
|
Property
|
Description
|
Values
|
Example
|
Filtering Properties
|

|
filter (visual filtering)(not inherited)
|
applies various visual filtering for special effects
|
General form: { filter: filtername(parameter1, parameter2...)
|
{ filter: dropshadow (color=#9999FF, offx=3pt, offy=5pt) }
|

|
Alpha | Sets a uniform transparency level. |
filter: alpha(Opacity=, FinishOpacity=, Style= StartX=, StartY=, FinishX=, FinishY=)
|
filter: alpha(Opacity=75, FinishOpacity=15, Style=1)
|

|
Blur | Creates the impression of moving at high speed. |
filter: blur(Add=, Direction=, Strength=
|
filter: blur(Add=1, Direction=90, Strength=10)
|

|
Chroma | Makes a specific color transparent. |
filter: chroma(Color=)
|
filter: chroma(Color=#ffff00)
|

|
DropShadow | Creates a solid silhouette of the object. |
filter: DropShadow(Color=, OffX=, OffY=, Positive=)
|
filter: DropShadow(Color=#003399, OffX=3, OffY=3, Positive=1)
|

|
FlipH | Creates a horizontal mirror image. |
filter: fliph
|
filter: fliph
|

|
FlipV | Creates a vertical mirror image. |
filter: flipv
|
filter: flipv
|

|
Glow | Adds radiance around the outside edges of the object. |
filter: glow(Color=, Strength=)
|
filter: glow(Color=#00FF00, Strength=30)
|

|
Grayscale | Drops color information from the image. |
filter: gray
|
filter: gray
|

|
Invert | Reverses the hue, saturation, and brightness values. |
filter: invert
|
filter: invert
|

|
Light | Projects a light source onto an object. |
filter: light
|
filter: light
|

|
Mask | Creates a transparent mask from an object. |
filter: mask(Color=)
|
filter: mask (Color=#009933)
|

|
Shadow | Creates an offset solid silhouette. |
filter: shadow(Color=, Direction=)
|
filter: shadow(Color=#9900FF, Direction=135)
|

|
Wave | Creates a sine wave distortion along the X axis. |
filter: wave(Add=, Freq=, Phase=, LightStrength=, Strength=)
|
filter: wave(Add=1, Freq=10, Phase=90, LightStrength=10, Strength=10)
|

|
XRay | Shows just the edges of the object. |
filter: xray
|
filter: xray
|

|
filter (reveal transition filter) (not inherited)
|
allows you to reveal or hide visual elements, using predefined patterns
|
General form: { filter: revealtrans (duration=duration, transitionshape=transitionshape)}
(the duration is expressed in seconds.milliseconds)
(the transition shape is indicated by a value from 1-23, as follows:
Transition type | Value |
Box in | 0 |
Box out | 1 |
Circle in | 2 |
Circle out | 3 |
Wipe up | 4 |
Wipe down | 5 |
Wipe right | 6 |
Wipe left | 7 |
Vertical blinds | 8 |
Horizontal blinds | 9 |
Checkerboard across | 10 |
Checkerboard down | 11 |
Random dissolve | 12 |
Split vertical in | 13 |
Split vertical out | 14 |
Split horizontal in | 15 |
Split horizontal out | 16 |
Strips left down | 17 |
Strips left up | 18 |
Strips right down | 19 |
Strips right up | 20 |
Random bars horizontal | 21 |
Random bars vertical | 22 |
Random | 23 |
|
{ filter: revealtrans (duration=2.0, transition=10 }
|

|
filter (blend transition filter) (not inherited)
|
causes visual element to fade in or out
|
General form: { filter: blendTrans (Duration=duration}
(the duration is expressed in seconds.milliseconds)
|
{ filter: blendTrans (duration=2.0, transition=10 }
|