Organizing content was always an important task for web designers. Just like accordions, using CSS tabbed navigation can help you structuring similar groups of content.
Besides so many rounded corners tabs in the wild, today you’ll learn how to create some CSS tabs with beveled or slanted corners using a clever CSS gradients technique.
There are a lot of articles in the wild that show you how to create tabs with CSS3 and jQuery. Yet, I decided to create my own CSS tabs as well and I hope you’ll like my result.
A while ago I read this article article by Lea Verou about how to create beveled corners using CSS gradients. I found that very clever and we will use that technique in order to create our tabs.
The purpose here, as usual, is to write clean and semantic markup: unordered list for the tabbed navigation and simple
div’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 CSS shadow helps creating the effect of overlapping tabs.
If you read my previous articles, then you already know that I like to do stuff that works (even if it just degrades gracefully) also on older browsers like the IE (Trident).
Having said that, this demo is working also for older browsers. Obviously, it just looks slightly different, as no CSS3 support is available:
Such a gradient for Safari (lower than 5.1) would be quite complex. So, I decided to skip it (for now).