To organize content on site was always an important task for web designers. Using a CSS3 tabbed navigation can help you structuring similar groups of content.
Along with so many rounded corners (which lately became the default), today you’ll learn how to create some good looking CSS3 tabs with beveled corners. We’ll do that using a clever CSS3 gradients technique.
The purpose here, as usual, is to write clean and semantic markup: unordered list for the tabbed navigation and simple
‘s for wrapping content.
So, check the HTML below:
Minimal and easy to update styles, also no images were used here:
The code below it may not be the best possible, but I think it’s pretty decent 🙂
Check out the transparent corners! You can use the tabs with any background image. No side effects, no overlapping colors to match or something else.
Also, the left shadow helps creating the effect of overlapping tabs.
This demo is working also for older browsers. It just look slightly different, as no CSS3 support is available.