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

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
IE4
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) }
IE4
Alpha Sets a uniform transparency level. filter: alpha(Opacity=, FinishOpacity=, Style= StartX=, StartY=, FinishX=, FinishY=) filter: alpha(Opacity=75, FinishOpacity=15, Style=1)
IE4
Blur Creates the impression of moving at high speed. filter: blur(Add=, Direction=, Strength= filter: blur(Add=1, Direction=90, Strength=10)
IE4
Chroma Makes a specific color transparent. filter: chroma(Color=) filter: chroma(Color=#ffff00)
IE4
DropShadow Creates a solid silhouette of the object. filter: DropShadow(Color=, OffX=, OffY=, Positive=) filter: DropShadow(Color=#003399, OffX=3, OffY=3, Positive=1)
IE4
FlipH Creates a horizontal mirror image. filter: fliph filter: fliph
IE4
FlipV Creates a vertical mirror image. filter: flipv filter: flipv
IE4
Glow Adds radiance around the outside edges of the object. filter: glow(Color=, Strength=) filter: glow(Color=#00FF00, Strength=30)
IE4
Grayscale Drops color information from the image. filter: gray filter: gray
IE4
Invert Reverses the hue, saturation, and brightness values. filter: invert filter: invert
IE4
Light Projects a light source onto an object. filter: light filter: light
IE4
Mask Creates a transparent mask from an object. filter: mask(Color=) filter: mask (Color=#009933)
IE4
Shadow Creates an offset solid silhouette. filter: shadow(Color=, Direction=) filter: shadow(Color=#9900FF, Direction=135)
IE4
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)
IE4
XRay Shows just the edges of the object. filter: xray filter: xray
IE4
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 }
IE4
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]