Combining Stacking with Translucence .....................................................
Now try a cool trick that combines stacking with opacity adjustments. It’s
useful for all kinds of design effects and is particularly dramatic when used
with scripting that animates the opacity or positioning of the elements
dynamically. This kind of animation can be quite compelling when used cor-
rectly. This example adjusts the sample code you’ve been using throughout
this chapter, but causes the sidebarelement to show through the maintext
element.
CSS3 is working to incorporate an opacity property in some future spec, but
why wait? IE 5.5 and later supports an opacity feature you can use right now.
How about some stacking, combined with blending of elements? Take a look
at Figure 4-9.
In Figure 4-9, the sidebaris defined as having a lower z-index than the
maintext div. The sidebarhas a z-index of 1 and the maintexthas a z-
index of 2; therefore, the maintextis superimposed on top of the sidebar.
However, the sidebarshows through because the maintextis made some-
what transparent by giving it an opacity value of 60. (An opacity value of 0
makes an element fully transparent; a value of 100 makes it fully opaque.)
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60)
Figure 4-8:
This sidebar
is positioned
“on top” of
the
maintext
div, thanks
to a high z-
index value.
82 Part II: Looking Good with CSS
