3D Tabs with CSS2

Visitors to your web site would like to have some sense of space in it. A good way to do this very thing is to use tab displays. Justin Cook tells us just how to do that in his article. “Step 1 – Create the Rounded Rectangles

So now we have an empty workspace. Grab the rounded rectangle tool. If you don’t see it, click and hold the rectangle tool, and it will appear as an option to switch to.

Draw a big (preferrably white) rounded rectangle, the full width of the image. It doesn’t matter too much the height of it, as you’ll be tiling the center portion to stretch to whatever length the page needs. Just leave a little space at the top for the two different tabs. Duplicate this layer into another, and hide that layer. (This step is important, and we’ll come back to it later.)

On the same layer, draw a small rounded rectangle that runs into the top of the big one. This is the first tab, the ‘on’ or active tab. Group these two rectangles with ‘Ctrl + g’.

Now create another layer, behind the first, and draw one more rounded rectangle. This one should be approximately the same size as the first, but a few pixels higher. Do not group this one.

You should now have something that looks like the following:”

Read the full article and see the examples at Devarticles.