INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

CSS Visual Filters

How to apply visual filters to text with CSS by cian
Posted: 19 Feb 03 (Edited 5 Feb 04)

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


Alpha Filter
CSS Code Example:

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

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



Blur Filter
CSS Code Example:

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

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.



Glow Filter
CSS Code Example:

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

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.



Drop Shadow Filter
CSS Code Example:

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

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.



Shadow Filter
CSS Code Example:

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

Possible Parameters:

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



Wave Filter
CSS Code Example:

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

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.



FlipV Filter
CSS Code Example:

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

FlipH Filter
CSS Code Example:

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

Possible Parameters:

n/a



Chroma Filter
CSS Code Example:

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

Possible Parameters:

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



Grayscale Filter
CSS Code Example:

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

Possible Parameters:

n/a



Invert Filter
CSS Code Example:

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

Possible Parameters:

n/a



Light Filter
CSS Code Example:

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

Possible Parameters:

n/a



Mask Filter
CSS Code Example:

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

Possible Parameters:

color: colour of the transparent regions. Hex value.



X-Ray Filter
CSS Code Example:

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

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

 

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close