3D Tabs with CSS2

(Page 1 of 5 )

I hope you had a chance to enjoy my first article on created a tabbed navigation structure with nothing but pure Cascading Styles. With this article we'll move beyond the basics, evolve from the flat colored boxes and lines to nice, rounded 3D looking tabs. This article will provide instructions on creating the images in FireWorks, slicing them correctly, and fitting them into our tab scheme.

I highly doubt that I need to convince you of the benefits of implementing tabs as a navigation mechanism. If you are unconvinced, or haven't read this article's predecessor, please do that now. But if you feel you're ready to move right into the fancy-schmancy 3D tab creation, by all means read on!

I am using FireWorks for the image creation and slicing, but I can't force you to do the same. If you have Photoshop, go ahead and use it. If you don't have a decent image manipulation tool, I recommend the GIMP (http://gimp.org/), it's Free Software, and it rocks. But because I initially did this using FireWorks, I'm just going to outline the steps I've already taken. Call me lazy...

My previous article described in detail how to create some wonderful tabs, and in the end they looked like this:

And what we'll have when we'll have this:

Much nicer, wouldn't you agree? Let's get into the first step then -- the image creation and slicing.

Next: The Images >>
 

More Style Sheets Articles
More By Justin Cook

Comments On: 3D Tabs with CSS2

· I don't mean to be too critical, but what on Earth do you mean that it has been...    · Is there a working example of this?On page 1 of the article (at...    · completely agree! If you are going to write such articles (especially on css), then...    · not testing in non-ie browsers? shame on you. you shouldnt call it an article if you...    · Hi all,Thanks to a very knowledgable person from another forum (i won't name...    · As for doing this without javascript, you can remove the onClick for the div and put...    · This asp code doesn't work if your on a page that is not included in the array. This...    · i should of read the whole article...sorry    · First of all, stop calling the author "lazy". The guy has written 12 articles for...    · The real funny thing is this.... These people are all calling the author lazy, but...   >>> Post your comment now!