Home arrow Style Sheets arrow 3D Tabs with CSS2

3D Tabs with CSS2

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.

Author Info:
By: Justin Cook
Rating: 5 stars5 stars5 stars5 stars5 stars / 12
August 17, 2004
  1. · 3D Tabs with CSS2
  2. · The Images
  3. · The Code
  4. · The Style
  5. · Conclusion and All the Code

print this article

3D Tabs with CSS2
(Page 1 of 5 )

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:

3D Tabs with CSS2

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

3D Tabs with CSS2

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

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials