On 11.01.03, In A tutorial on how to use HTML and CSS to create a simple 3-D web page effect that uses images layered on top of each other.
You can use a HTML-editor program such as EDITPLUS 2 or any of the many that are available on the internet, but let’s build this assuming that you do not have the program. Every computer has NOTEPAD, so lets use that.
Right-click on your computer’s desktop, and create/open a blank NOTEPAD document. Type in (or, COPY & PASTE) the following:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”>
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<META content=”text/html; charset=windows-1252″ http-equiv=Content-Type>
</HEAD>
<BODY>
</BODY>
</HTML>
This is the basic framework for a simple HTML document, hereafter referred to as “web page.”
We need to SAVE this so lets call the document “z_index“, but save it with the required extention “.html” (note the “File name:” line) and also note that the default “Save as type:” is “text document (*txt)” by default, which is not what we want.
Click the scroller arrow on the far right of “Save as type” and select “All Files” from the drop-down list that will appear. Next, SAVE the document to your computer’s desktop.
You should now have a clickable icon that launches your preferred browser and opens this web page, although what we have currently is just a blank white field. Now, lets create something. -A container element.
In HTML, all the code that is present resides between the opening “<BODY>” and the closing “</BODY>” tags. Any tag that omits the “/” is called an “opening tag” and any tag that provides a “/” is called the “closing tag.”
To be validationally correct, all tags require a matching set of opening and closing tags although most browsers (incorrectly) attempt to display the page even if the required closing tag is absent.
Between the “<BODY>” and “</BODY>” tags, let’s add some HTML. Let’s create a “DIVISION” or “<DIV>” for short. For the purposes of brevity, I am leaving out the bulk of the HTML layout. Just focus upon the code between the opening and closing body tags from this point on.
<BODY>
<DIV>
</DIV>
</BODY>
We have just created a “division” that has no physical properties. No height, no width, no border, no background-color. So let’s do this next.
To the OPENING “<DIV>” tag, add the following:
<BODY>
<DIV style=”WIDTH: 300px; HEIGHT: 295px;BORDER: black 6px double; BACKGROUND-COLOR: silver; POSITION: relative;“>
</DIV>
</BODY>
We will need to use some Cascading Style Sheets (”CSS” or “styles” for short) commands next. This style=”" when used in this manner is called “inline-css.”
Here, we have instructed the “<DIV>” to be 300 pixels (px) wide, 295 pixels tall, has a black 6px double border and the container DIV has a background-color of silver.
We also give this “<DIV>” a special property called “POSITION:relative;” which sets us up for what we intend to place inside of the container in a later step.
The default position of all elements in HTML is “position:static;” but because we are going to be doing some special layering effects to elements within this DIV contianer, it is required that the container be explicitly set to “position:relative;” Changing any element from the default “position:static;” to “position:relative;” makes no discernable changes to the element. It only allows “position:absolute;” to function correctly within it’s dimensions.
SAVE your z_index.html document, and view it in browser mode. You should now see the following object in your browser (note that I am using FIREFOX browser) :
We have a simple container box (in this case, a division or “<DIV>” element) that is 300px wide, 295px tall, has a silver background-color and has a double border of black.
Now let’s place some images inside of this silver-colored container. Return to edit mode in your NOTEPAD document.
We’re going to add some ‘blank’ images. Because the logistics of getting actual images associated with this article from this hosting would be difficult, we are creating image placeholders.
<DIV style=”WIDTH: 300px; HEIGHT: 295px;BORDER: black 6px double; BACKGROUND-COLOR: silver; POSITION: relative;”>
<IMG alt=”first image, z-index:1;“>
<IMG alt=”second image, z-index:2“>
<IMG alt=”third image, z-index:3“>
<IMG alt=”forth image, z-index:4“>
</DIV>
The TAG for inserting an image into an HTML document is “<IMG>.” The “<IMG>” for this tutorial will not require the mandatory ‘closing tag.’
Note the alt=”decriptive text” property. This will help to explain what the image is should the user-agent (computer, hand-held device, cell-phone, etc.) not be able to display images. Or if the image is broken or physically missing, the text is displaed instead.
Proper semantic use of all tags in HTML should adhere to the Standards set forth by the World Wide Web Consortium (”W3C”) for cross-browser conformity, and for meeting the requirements of Assessibility s.508 for the Handicapped.
Using the alt=”descriptive text” correctly meets a minimal requirement for images, which to people whom are visually disabled (colorblind, visually blind either partially for fully, or for users of user-agents (”UNIX browsers, or text-to-speech, text-to-braille, etc.”) that cannot display images or have images purposefully turned-off, etc.) may not be able to see.
Note that the alt=” “ includes textual reference to z-indexes, which are numbered 1, 2, 3 and 4.
Now, for the FIRST “<IMG>” we need to add some explicit style properties.
<IMG alt=”first image, z-index:1″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 25px; LEFT: 25px; BACKGROUND-COLOR: wheat; POSITION: absolute; Z-INDEX: 1; BORDER: red 2px solid;”>
scr=”path/image.ext” is the “source” of the image (the “path” in the directory to where it is located; usually, this is a folder called “images”) the name of the image and lastly, the “extention” or “format” of the image. This image format is usually one of either *jpg, *gif or *png.
There are other image formats, but these are the main three. Since we are not using images in this tutorial we can skip this by leaving the double-quotes blank, or empty.
In the absence of an actual image however, we are thus mandated to state an explicit width and height for the image. Otherwise, the displayed image-placeholder will collapse upon itself and be just a single pixel in width and height, with our ststed border around it.
We state the intended WIDTH and HEIGHT of the image. We also state where we want the image to physically appear within the container DIV (for the first image, 25px from the TOP: and 25px from the LEFT: of the container. The four option are “TOP:“, “RIGHT:“, “BOTTOM:“, and “LEFT:” followed by a pixel value or other unit of measure.)
Next we add a new property: “POSITION:absolute;”
This “Postion:absolute;” property effectively takes an element (such as an image) ‘out of the document flow‘ so that it exerts ‘no pressure‘ against any other objects that will appear. Thus it is now possible to overlap these absolute-positioned elements.
“Position:absolute;” can be a very useful property but it can also be a terrible bane to the construction of a web page. Used incorrectly or excessively it will cause ever-surmounting display discrepancies in different browsers.
This is why we place “position:absolute;” objects inside of a “position:relative;” container. Think of the “position:relative;” container as a barbed wire fenced pasture that contains the rogue stallion “position:absolute;” and you’ve the right idea. You need this “position:relative;” fence around “position:absolute;” to keep it positioned where you want.
To this absolute-postioned image, we place our first “z-index:n;”
The X-axis is the horizontal (left/right) axis and the Y-axis is the vertical (up/down) direction. The Z-axis (or z-index:n ) property is one that enters a virtual 3-D realm. The value “n” (for “numeral” integer) is a numerical value that determines layered position in the stack.
Use positive integers only for z-index:n; values. Remember, the higher the number, the higher the ‘layer’ is overtop of the “position:relative;” container. There are no limits to the number of z-index:n layers that you are allowed to create.
So, we now have a container with a blank image that has a wheat-colored background and a red border. This image placeholder is positioned 25px from the top and from left-side of the container, and with descriptive text visible.
Reminder: the alt=”descriptiuve text” is only visible when the image is physically absent, as it is in this tutorial. A user-agent for the handicapped would ignore the image and just read or speak the alt=”descriptive text.”
What we have so far should look something like this image below:
The “z-index:n” does not appear impressive with just one image in use. So, we add MORE images and specific properties affecting each, and begin to overlap them in a pleasing visual style. Note that the BOLD additions have different LEFT: and TOP: and z-index:n properties assigned.
<DIV style=”WIDTH: 300px; HEIGHT: 295px;BORDER: black 6px double; BACKGROUND-COLOR: silver; POSITION: relative;”>
<IMG alt=”first image, z-index:1″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 25px; LEFT: 25px; BACKGROUND-COLOR: wheat; POSITION: absolute; Z-INDEX: 1; BORDER: red 2px solid;”>
<IMG alt=”second image, z-index:2″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 65px; LEFT: 65px; POSITION: absolute; Z-INDEX: 2; BORDER: red 2px solid; BACKGROUND-COLOR: yellow;”>
<IMG alt=”third image, z-index:3″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 115px; LEFT: 115px; POSITION: absolute; Z-INDEX: 3; BORDER: red 2px solid; BACKGROUND-COLOR: teal;”>
<IMG alt=”forth image, z-index:4″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 165px; LEFT: 165px; POSITION: absolute; Z-INDEX: 4; BORDER: red 2px solid; BACKGROUND-COLOR: green;”>
</DIV>
SAVE this in your NOTEPAD (reminder, this must be SAVED as “.html” with “All files” mode) and now, double-click the browser icon from your desktop to view what we have created.
Your browser should now display something like the following image:
We now have four colored image-placeholders, all with unique alt=”descriptive text” that are “absolute-positioned” in an overlapping manner. Note how we can even position an image outside of the “position:relative;” container (the GREEN image extends slightly outside of the physical borders of the gray DIV container.)
This and so very much more can be done in advanced HTML and CSS. For instance, by changing the image into a hyperlink, you can assign a “psuedo-class” with hover-properties so that even though the images are explicitely z-index layered, hovering your pointer-tool (mouse) over each image will cause that specific image to ‘jump to the top-most layer‘ for a surprising dynamic effect.
By adding a small javascript we can make these images moveable upon the page too! One could ‘grab, drag and drop‘ the images using the mouse/pointer tool and drag/drop to anywhere on the page! This could be useful in the creation of a virtual puzzle. The visitor could unscramble and reassemble the images into an image. Creative use of images with transparent portions would make this even more challenging!
The many things that can be done using HTML, CSS and other tools are virtually limitless.
And in case you have missed parts of the code, here is the entire full code. Paste this into a NOTEPAD file and SAVE as “z_index.html” with “All Files” selected as the ‘Save as type’ option.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd”>
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<META content=”text/html; charset=windows-1252″ http-equiv=Content-Type>
<META name=GENERATOR content=”MSHTML 8.00.6001.18999″>
</HEAD>
<BODY><DIV style=”WIDTH: 300px; HEIGHT: 295px;BORDER: black 6px double; BACKGROUND-COLOR: silver; POSITION: relative;”>
<IMG alt=”first image, z-index:1″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 25px; LEFT: 25px; BACKGROUND-COLOR: wheat; POSITION: absolute; Z-INDEX: 1; BORDER: red 2px solid;”>
<IMG alt=”second image, z-index:2″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 65px; LEFT: 65px; POSITION: absolute; Z-INDEX: 2; BORDER: red 2px solid; BACKGROUND-COLOR: yellow;”>
<IMG alt=”third image, z-index:3″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 115px; LEFT: 115px; POSITION: absolute; Z-INDEX: 3; BORDER: red 2px solid; BACKGROUND-COLOR: teal;”>
<IMG alt=”forth image, z-index:4″ style=”src=path/image.ext; WIDTH: 150px; HEIGHT: 150px; TOP: 165px; LEFT: 165px; POSITION: absolute; Z-INDEX: 4; BORDER: red 2px solid; BACKGROUND-COLOR: green;”>
</DIV>
</BODY>
</HTML>
Great. I was looking for something like this. Let me see whether I can use some of this techniques in the new page which I am creating. Thanks sticks. By the way, did you get a chance to try that out?
VERY impressive.
Good post. I may get brave someday and try it!
Thanks,
Clay
Nice Share.
thank you very much!