How to apply visual filters to text with CSS

Introduction
This guide shows you how to apply visual filters to text with CSS. Note: This is IE only, as usual!
To see the results of these filters, as I have only displayed the code here, visit http://www.ssi-developer.net/css/visual-filters.shtml


[color blue]Alpha Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Alpha(Opacity=80, FinishOpacity=70, Style=2); font-size:20pt;">Alpha Filter</span>[/color]

Possible Parameters:

Opacity: 0 (fully transparent) - 100 (fully opaque)
Finishopacity: 0 (fully transparent) - 100 (fully opaque)
Style: shape characteristics of opacity gradient. 0 (uniform), 1 (linear), 2 (radial), 3 (rectangular)
startX: X coordinate for opacity gradient to start
startY: Y coordinate for opacity gradient to start
finishX: X coordinate for opacity gradient to end
finishY: Y coordinate for opacity gradient to end



[color blue]Blur Filter[/color]
CSS Code Example:

[color green]<span style="filter: blur(add=false, direction=135, strength=6); font-size:20pt;width:200px;">Blur Filter</span>[/color]

Possible Parameters:

Add: whether to add the original image to the motion-blurred image. True=added, False=not added.
Direction: direction of the blur basically, in 45 degree increments from 0(top) clockwise to 315 (top left).
Strength: in pixels how much the blur will extent. Default is 5.



[color blue]Glow Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Glow(Color=#ffcc66, Strength=8); width:200px;font-size:20pt;">Glow Filter</span>[/color]

Possible Parameters:

Color: colour for the shadow effect. Hex value.
strength: intensity of the glow effect. 1 - 255. Gets away from "glow" at high values.



[color blue]Drop Shadow Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;">DropShadow Filter</span>[/color]

Possible Parameters:

Color: colour for the drop shadow effect. Hex value.
offX: number of pixels shadow is offset in x-axis
offY: number of pixels shadow is offset in y-axis
positive: non-zero value create dropshadow for any non-transparent pixel, false or zero value creates shadow for any transparent pixel in visual object.



[color blue]Shadow Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Shadow(Color=#00cc66, Direction=45);width:200px;font-size:20pt;">Shadow Filter</span>[/color]

Possible Parameters:

color: colour of the shadow. Hex value.
direction: directional offset of the shadow in 45 degree increments bwetween 0 and 315 degrees.



[color blue]Wave Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Wave(Add=1, Freq=2, LightStrength=30, Phase=20, Strength=7); width:200px;font-size:20pt;">Wave Effect</span>[/color]

Possible Parameters:

add: true (non-zero) adds waved effect to original, false (zero) does not.
freq: number of waves in visual area.
lightstrength: strength of light in wave effect from 0 - 100.
phase: wavelength at which offset should start from 0 - 360.
strength: intensity of wave effect.



[color blue]FlipV Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: FlipV; width:200px;font-size:20pt;">FlipV Filter</span>[/color]

[color blue]FlipH Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: FlipH; width:200px;font-size:20pt;">FlipH Filter</span>[/color]

Possible Parameters:

n/a



[color blue]Chroma Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Chroma(Color=#9999cc); width:200px;font-size:20pt;">Chroma Filter</span>[/color]

Possible Parameters:

Color: Value of the color to be subject to chromakey transparency. Hex value.



[color blue]Grayscale Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Gray; width:300px;font-size:20pt;">Grayscale Filter</span>[/color]

Possible Parameters:

n/a



[color blue]Invert Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Invert; width:300px;font-size:20pt;background:#eeeeee;">Invert Filter</span>[/color]

Possible Parameters:

n/a



[color blue]Light Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Light; width:200px;font-size:20pt;">Light Filter</span>[/color]

Possible Parameters:

n/a



[color blue]Mask Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Mask(Color=#9999cc; width:200px;font-size:20pt;">Mask Filter</span>[/color]

Possible Parameters:

color: colour of the transparent regions. Hex value.



[color blue]X-Ray Filter[/color]
CSS Code Example:

[color green]<span style="FILTER: Xray; width:200px;font-size:20pt;background:#eeeeee;">X-Ray Filter</span>[/color]

Possible Parameters:

n/a


To see the results of these filters, as I have only displayed the code here, visit http://www.ssi-developer.net/css/visual-filters.shtml
Have fun!

.: cian : February 2003 :.