Create Tabbed Area using CSS3 only

When you think of “tabs”, your mind might go right to JavaScript. Watch for a click on a tab, hide all the panels, show the one corresponding to tab just clicked on. All major JavaScript libraries tackle tabs in some way. But there is a way to accomplish this same idea with “pure CSS”. Chris Coyiers on css-tricks tackle this traditionally JavaScript project with only CSS.

css3 tabs Create Tabbed Area using CSS3 only

It has wide support across all the major current browsers, but not support for IE 6, IE7 and IE8. These browsers are still very much on the radar, which puts this whole tutorial in a fun/educational category rather than a use-this-in-live-production category.

Requirements: CSS3 support browser
Demo: http://css-tricks.com/examples/CSSTabs/

Incoming search terms for the article:

Related Posts

SoFresh: Making Your CSS Yummy

CSS3 and HTML5 Musical Dropdown Menu

Creating An HTML5 3D Cube Slideshow

Creating Slopy Elements with CSS3