shadowline
Opacity - The Image << Opacity - Divs >> Opacity - Iframes
Ok, so far you have a page with a highly annoying background image to test this on. The next step is to create a CLASS and a DIV that will be used to create the effect. Be sure to size the DIV and position it to the desired spot.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> my test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background: #ffffff url(smilie.gif);}
.trans_div {
width: 300px;
height: 200px;
position: absolute;
left: 50px;
top: 50px;
font-weight:bold;
padding:10px;
border:solid 1px #000;
overflow:auto;
}

</style>
</head>
<body>
<div class="trans_div"> this is a test </div>
</body>
</html>

click to see example

Have a look at the .trans_div class in the css area above. Most of that should be self-explanitory and easily known if you have looked through our css tutorials already.

So far, the background is transparent. Not the effect we are going for. Time to add in the image we created on the previous page to bring it together.

To get the image to work in IE as well as other browsers, we will have to use some "proprietary" coding. (That is coding which will work in specific browsers only.) For those of you who are worried about validation requirements, calm down. It should still validate afterwards.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> my test page </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {background: #ffffff url(smilie.gif);}
.trans_div {
width: 300px;
height: 200px;
position: absolute;
left: 50px;
top: 50px;
font-weight:bold;
padding:10px;
border:solid 1px #000;
overflow:auto;

/* This is an IE filter command. Other browsers will ignore it */
/* It goes into the trans_div class */


filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='50percent.png');
}

/* Square bracketed class styles are a non-IE type browser variety */
/* This is a seperate css entry, not part of the original trans_div class */


.trans_div[class] {
background-image:url(50percent.png);
}

</style>
</head>
<body>
<div class="trans_div"> this is a test </div>
</body>
</html>

click to see example

So as you see in the comment lines in the example, we are using a Microsoft IE filter to satisfy that browser, and a bracketed class to satisfy everyone else.

Now it is up to you to adjust values and colors as you desire. Have fun!
Opacity - The Image << Opacity - Divs >> Opacity - Iframes
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow