Ever since I started working for one of my CSS3 breadcrumbs example, I thought about writing this tutorial. In this article, I will use a similar technique in order to create some good looking CSS3 tabs.
While in my previous CSS3 tabs tutorial I tried to simulate some beveled corners for the tabs, this time I will show you how to create folder tabs using nothing more than pure CSS3.
The markup is self explanatory. While the title attributes might seem to be extra, in this case they are needed for the jQuery stuff. After reading your comments, I decided to update the title attribute with name. This way, you will avoid seeing unnecessary tooltip when hovering on the tabs.
So, here are the ingredients:
#tabs - an unordered list that holds the tab navigation items.
#content - a wrapper for each tab content.
Below you’ll find the CSS lines necessary for creating these tabs. Also, the demo source contains all the prefixed CSS3 properties.
There is nothing to add here, it’s similar to my previous tabs article.
Again, I updated a bit the above code to add detection when clicking on the current tab. Now, everything should be just fine. Thanks for your suggestions!
The end (of this tutorial)
This is just another small example that shows the CSS3 awesomeness. Everything is great also for older browsers, the tabs degrade nice.
So, having said that, I hope you liked this article and thanks for reading it!
I just updated the jQuery code a bit in order to fix the nested div’s issues. Now everything should be just fine. Good luck with coding!