TheDesignspace
Creating simple transparency effects with CSS


December 03, 2005
CSS

You will need to create some styles for your elements (in this case two absolutely positioned divs). See the example code below.

The red div has no special effects applied - it is just there to show through the blue div. The blue div has 3 versions of the opacity effect applied to it, to take care of different browsers.

The result:

Example Code
<style type=\"text/css\">
<!--
#Layer1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 199px;
	top: 244px;
	background-color: #CC0033;
}
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 273px;
	top: 169px;
	background-color: #00CCFF;
	 filter:alpha(opacity=50);   /* Internet Explorer       */
   -moz-opacity:0.5;           /* Mozilla 1.6 and below   */
   opacity: 0.5;  
}
-->
</style>
in the body section, put the 2 layers:

<div id=\"Layer1\"></div>
<div id=\"Layer2\"></div>

Posted by ellen at December 03, 2005 10:50 AM | TrackBack

 Comments
 Post a comment
Name:


Email Address:


URL:


Comments:


Remember info?



Recommended Reading