<div class=”sidebar”> Take a look at this sidebar! Manipulate
z-index, opacity and position and you can get some
great effects.</div>
<div class=”maintext”>
</div>
</body>
</html>
Imagine the nice fade-in effect that you can generate if you add some script-
ing to slowly adjust the opacity value while the user is watching. You’ve prob-
ably seen cool effects like fades on some of the better-designed Web sites. By
the time you finish this book, you’ll know how to create animation with CSS
and scripting. But if you’re the impatient type who wants to get to it right
away, flip over to Chapter 16 now.
If you are concerned about browser-independent code, other browsers than
IE also support opacity through proprietary properties. This code enables
this trick to work in IE, Mozilla, Safari, and Opera:
div.maintext {position: absolute; z-index: 2; background-
color: darkkhaki; top: 55;left: 100px; height:
75%; width: 75%;
opacity: 0.6; /*supported by current Mozilla, Safari, and
Opera*/-moz-opacity: 0.6; /*older Mozilla*/
-khtml-opacity: 0.6; /*older Safari*/
filter: alpha(opacity=60); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60)}
84 Part II: Looking Good with CSS
