Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Visual filters

Visual transition filters allow you to manipulate text and pictures to create multimedia effects on the screen. You have always been able to use scripts for this but the filters make the effects easier to achieve (no programming - whoopee). Although if you are keen on showing off, you can use the scripts to manipulate the filters. You might, for example, make the effect happen at a certain time or when the mouse moves over the text or picture.

It is most likely that you’ll want to use filters on a picture but you can apply visual effects to text if you put the text in a <div> or <span> tag and specify a height and width.

You can use any one of the pre-defined filter effects:

Filter...

Effect...

Alpha

Sets a uniform transparency level

Blur

Creates the impression of moving at speed

Chroma

Makes a specific colour transparent

DropShadow

Creates a drop shadow

FlipH

Creates a horizontal mirror image

FlipV

Creates a vertical mirror image

Glow

Adds radiance to the outside edges

Grayscale

Greyscales a picture

Invert

Reverses hue, saturation and brightness values

Light

Projects a light source into a picture

Mask

Creates a transparent mask

Shadow

Creates a solid silhouette

Wave

Creates a sine wave distortion

Xray

Shows just the edges

Each filter has a set of optional parameters that define the nature of the effect, for example the colour. You can also chain visual filters together. For example, add a blur and a drop shadow filter.