December 3, 2012

Create CSS3 tabs with beveled corners

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.

View demo

The HTML

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:

 

 

 

 

 

 

One – content

 

Two – content

 

Three – content

 

Four – content

 

The CSS

Minimal and easy to update styles, also no images were used here:

The jQuery

The code below it may not be the best possible, but I think it’s pretty decent 🙂

The result

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.

View demo

Browser support

This demo is working also for older browsers. It just look slightly different, as no CSS3 support is available.

CSS3 # , ,
Share: / / /

You might also like

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Stay In Touch