Home arrow Style Sheets arrow Page 4 - 3D Tabs with CSS2
STYLE SHEETS

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: 4 stars4 stars4 stars4 stars4 stars / 11
August 17, 2004
TABLE OF CONTENTS:
  1. · 3D Tabs with CSS2
  2. · The Images
  3. · The Code
  4. · The Style
  5. · Conclusion and All the Code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
3D Tabs with CSS2 - The Style
(Page 4 of 5 )

#everything {
  padding: 0px;
  margin: 4px;
  height: 100%;
  min-height: 800px;
  width: 900px;
}

So I set this to the width of the image I created. Then each child node is set to 100% of this width, though you could also use the 'inherit' attribute.

#navTabs {
  padding: 0px 0px 0px 15px;
  margin: 0px;
  width: 100%;
  background: url("/cms/images/tabs/top.png") no-repeat top;
  height: 45px;
  vertical-align: top;
}

You'll notice this time it has a background, instead of just a line. The tab images will layer over this, the off images appearing behind, and the on images appear to meld right into it.

.tabon, .taboff {
  height: 45px;
  cursor: pointer;
  cursor: hand;
  display: inline;
  overflow: hidden;
  vertical-align: top;
}

.tabOn {
  background-image: url("/cms/images/tabs/on_m.png");
  font-weight: bold;
}

.taboff {
  background-image: url("/cms/images/tabs/off_m.png");
  color: #666666;
}

Here I've set the background image to be the middle slice. This will repeat to the width of the div.

.tabItem {
  vertical-align:top;
  height: 45px;
  display:inline;
  font-size: 11px;
  margin: 10px 0px 0px 0px;
}

#actionPanel {
  width: 100%;
  height: 70%;
  padding: 10px;
  background: url("mid.png");
}

#btm {
  height: 16px;
  background: url("bottom.png");
  }

And of course, I set the background of each of the other two sections.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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