« Be a Blog Consultant | Main | Let's Talk Turkey about Blogging »
December 07, 2004
Z-index imagination
Some of the new constructs to html over the last few years allow for greater imagination. You may have seen sites that employ newer design strategies, but didn't realize what you were looking at. One of these new constructs comes from the use of CSS to utilize the advantages of "z-index"
This CSS property allows us to layer elements on top/ underneath other page elements. In essence what you do, is stack items on top of other items. This can get fairly complex, but what I will show you today is fairly simple, something that will perhaps stoke a little imagination for your upcoming projects.
Let's look at the simple example I have prepared for you:
http://www.homebusiness-websites.com/decezine
This isn't a single image. The image of the guy in the background is underneath the gray window and text headline. It is a z-index of 1.
The window has a z-index of two which means when positioned on top of the first element it takes prominence over the first element which was the picture with a z-index of 1. The gray window is a transparent gif image so you can see the guy underneath.
The text headline has a z-index of 3 which means that when it is positioned over the other two it takes prominence over the other elements so it appears to be on top of the guy and gray window.
The way to make sure these things are placed on a page exactly where you want them to be, is to place the stacking elements within a <div style="position: relative;"></div> so that the items inside this div are positioned relative to the div rather then the top/left of the browser window. Then you can use a little absolute positioning to jiggle the stacked elements around in the container div and move them up, down, right, or left.
If you would like to explore this idea even further, there is a good article on using stackable images to create CSS based image maps. Have a look here:
http://www.frankmanno.com/ideas/css-imagemap
Posted by Steve MacLellan at December 7, 2004 07:37 AM
Trackback Pings
TrackBack URL for this entry:
http://www.homebusiness-websites.com/mt/mt-tb.cgi/59
Comments
Post a comment
Thanks for signing in, . Now you can comment. (sign out)
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)