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

Alpha

Use the alpha filter to apply different gradients for a fading effect. You can set:

  • The level of opacity. Just enter a percentage (zero is transparent; 100 is fully opaque). If you want to add a gradient you need a finish opacity percentage as well
  • The co-ordinates for the opacity gradients. You enter the start and finish x and y co-ordinates
  • The way the browser applies the opacity gradient.

The opacity can be:

Value…

Gradient..

0

Uniform

1

Linear

2

radial

3

Rectangular

For example:

This HTML…

Displays as….

<div id="alpha" style="width:100; height:66;
filter:Alpha(Opacity=50, FinishOpacity=100,
Style=0, StartX=0, StartY=0, FinishX=320,
FinishY=240)">
<img src="image.jpg" width="100" height="66">
</div>

If you want to see a working example, you can look at the Filter Effects page. This HTML page shows the effects of all the visual filters. For each filter, there is an example. Underneath the example, there is a box for each parameter. You can change the values for the parameter and click on the Change button to see the effect. The Reset button restores the example to the initial state.