Lessons Community Resources Tools

Transparency Effects

You can create transparency effects in CSS by using the following syntax :
  • filter: alpha(Opacity=??, FinishOpacity=??, Style=?, StartX=??, StartY=??, FinishX=??, FinishY=??);

Opacity=??
Sets the opacity of the object. 0 = invisible, 100 = completely visible. Sets the start opacity when used in conjunction with FinishOpacity.

FinishOpacity=??
Sets the opacity for the end of the of the object. Creates a gradient effect.

StartX=??, StartY=??, FinishX=??, FinishY=??
Sets the coordinates for the opacity to start or end.

Style=??
Sets the type of gradient. 1 = Horizontal; 2 = Radial; 3 = Rectangular.

NOTE This trick will work only in IE 5.x and above browsers.

Example:

1.   Style = 1
2.   Style = 2
3.   Style = 3
4.   image transperancy

Code:

  1. <p style="FILTER: alpha(finishopacity=0, style=1);
    WIDTH: 120px; COLOR: #ffffff" align=middle width=120 bgColor=#808080"     >Style = 1</p>

  2. <p style="FILTER: alpha(finishopacity=0, style=2);
    WIDTH: 120px; COLOR: #ffffff" align=middle width=120 bgColor=#808080"     >Style = 2</p>

  3. <p style="FILTER: alpha(finishopacity=0, style=3);
    WIDTH: 120px; COLOR: #ffffff" align=middle width=120 bgColor=#808080"     >Style = 3</p>

  4. <img style="FILTER: alpha(finishopacity=0, style=2)" width="71" height="33"
    src="csstutorial.gif" alt="image transperancy" border="0">

Using this technique and you can add a mouseover effect on an image. The browser is doing all of work so there is no extra download time. This is a great way to add rollover effects without weighing down your page. Here's how.

Example:

transperancy mouseover

Move the mouse over the image to see the rollover effect.

Code:

<img onmouseover="this.filters.alpha.opacity='100'" style="FILTER: alpha(opacity=50)"
onmouseout="this.filters.alpha.opacity='50'" width="75" height="43" SRC="csstutorial.gif" alt="transperancy mouseover" border="0">