3D Tabs with CSS2

The Images

We're going to do this all with one image then slice it up. So let's give ourselves plenty of space to work with. Create a new image with a width of at least 900px. This will be the end width of the entire work space on the web page as well, so take into consideration how many tabs you'll have, and how much space you'll need.

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:

Step 2 – The 3-Dimensionalization

Now we want to make them look like buttons or protruted tabs. To do this we can use the Eye-Candy 'bevel boss' filter that comes with FireWorks. Bevel the grouped rectangles first. Then unhide that duplicate layer you created, bevel it so it's the same as the big rectangle, and then re-hide it. Then bevel that other rectangle, the 'off' tab that's sitting behind the group, and do it slightly darker than the others.

Now the image should look like this:

Step 3 – Slicing and Dicing

Now we need to create the slices to export the pieces we need. To create slices, we use the selection tool, select the area we want, right-click and select 'Insert Slice”.

So let's get the three general slices for the main panel (top, middle, bottom), then worry about the tabs. This is where that second, hidden layer comes in handy. Unhide it, and hide the layer with the tabs. Create three slices, one with the bottom corners, one thin one of the center, and one that capture the top corners and empty space. Your image should look like this:

Export each of these slices with their respective names: top, middle, and bottom.

Now let's do the tabs. Re-hide this layer, and we can forget about it now, it won't be used further. Unhide the tab layer. Slice it up so you get a left, center, and right slice of each button. The reason we don't just make each tab one big slice is so that we can tile the center piece, and grow the tab to whatever width is necessary. It should look like this:

Export each slice with the following names, from left to right: on_l, on_m, on_r, off_l, off_m, off_r. As you can see, I use the state of the tab (on/off), followed by the postion (left, middle, right). You can use whatever naming scheme works for you, just make sure you update the code and the styles.

And that's it. We've created, sliced, and exported all the images we need. Now let's get into the code.