[Cascading Style Sheets]
[Previous page] [Next page] [Section contents page]

Filtering Properties and Values

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 is not fully implemented in IE 4.0 yet, and I have been unable to get filtering to work; I will add more information on filtering after the official release of IE 4.0)

Commonly Used Properties and Values for Cascading Style Sheets

Table Legend
IE3 Supported in Internet Explorer 3.x
IE4 Supported in Internet Explorer 4.x
N4 Supported in Netscape 4.x
pt = points
in = inches
cm = centimeters
px = pixels
em = height of element's font
(the em unit is not yet widely supported and should be used with caution)
  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 effect Description
Alpha Sets a uniform transparency level.
Blur Creates the impression of moving at high speed.
Chroma Makes a specific color transparent.
DropShadow Creates a solid silhouette of the object.
FlipH Creates a horizontal mirror image.
FlipV Creates a vertical mirror image.
Glow Adds radiance around the outside edges of the object.
Grayscale Drops color information from the image.
Invert Reverses the hue, saturation, and brightness values.
Light Projects a light source onto an object.
Mask Creates a transparent mask from an object.
Shadow Creates an offset solid silhouette.
Wave Creates a sine wave distortion along the X axis.
XRay Shows just the edges of the object.
{ filter: dropshadow (color=#9999FF, offx=3pt, offy=5pt) }
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 typeValue
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 }
[Previous page] [Next page] [Section contents page]