Un ami m'a demandé de jeter un coup d'œil au code qu'il envisageait pour faire une boîboîte en CSS pur avec des onglets pour ses articles.

Je suis pas vraiment costaud en code — HTML ça va, CSS bonjour les dégats — mais le lien vers la source qu'il m'avait donné m'a plu : le gars a fait un très beau boulot qu'on va regarder de près.
Cette boîte à onglets en CSS3 n'utilise aucun Javascript ni aucune image grâce à certaines propriétés des CSS3 que nous allons voir dans ce billet.

Une boîte à onglets en CSS3

Le problème que rencontrait mon copain était de 2 ordres :

1. il est plus nul que moi (c'est peu dire)
2. il voulait dans ses boîtes un contenu de longueur variable. Vous verrez plus loin que je n'ai pas complètement régler le problème. S'il y a un Maître ès CSS qui passe par là...

J'ai quand même pris mon cerveau à 2 mains et j'ai réussi à faire un truc qui marche, dans IE7 et 8, sous Opera 10.x, sous Chrome (avec Safari ça devrait le faire donc) et bien sûr avec Firefox >3.5.
Regardons tout d'abord le code HTML :

<div id="csstabs">
<div id="tab1">
<h3>Onglet 1</h3>
<ul class="tabcontent">
<!-- Le contenu 1 //-->
</ul>
</div ><!-- fin onglet 1 //-->
<div id="tab2">
<h3>Onglet 2</h3>
<ul class="tabcontent">
<!-- Le contenu 2 //-->
</ul>
</div><!-- fin onglet 2 //-->
<!--[if IE 7]>
<br class="clearboth"/>
<![endif]-->
</div><!-- fin # csstabs //-->

Plus simple je connais pas.
Nous avons:

• un conteneur div id="csstabs"
• 2 divs pour enserrer chaque onglet (titre et contenu : # tab1 # tab2)
• 2 tags H3 pour les titres
• le contenu !-- Le contenu //-- où on va placer une liste en li (mais on peut y mettre ce que vous voulez du moment que ça ne provoque pas d'erreurs)

La feuille de style correspondante ?
Là voilà :

#csstabs{
	position:relative;
	width:500px;
	height:150px;
}

#csstabs h3{
 	height:24px;
	padding:5px;
	text-align:center;
	display:block;
	font-size:1em;
	font-weight:700;
	margin:0;
	background:#E0DFDB none repeat scroll 0 0;
	border-bottom:1px solid white;
	color:#000000
		}

.tabcontent{
	padding:10px;
	width:100%;
	background:#fff;
	border:1px solid #C4C0B4;
	position:absolute;
	left:0;
	top:34px;
	height:150px;
	display:block;
	margin:0;
	font-size:smaller;
	overflow:hidden/*pour gérer le débordement*/
		}

Nous donnons à la boîte un positionnement relatif avec une hauteur et une largeur fixe au chargement de la page. La hauteur s'adaptera ensuite en fonction de la position du curseur.
On définit ensuite la hauteur de l'onglet en H3 et définissons le contour.
La suite :

#tab1 .tabcontent{
		z-index:202;
		background:#fff
		}

#tab1 h3{
		width:150px;
		position:absolute;
		left:6px;
		top:0;
		background:#fff
		}

#tab2 .tabcontent{
		z-index:201; 
		opacity:0
		}

#tab2 h3{
		width:150px;
		position:absolute;
		left:180px;
		top:0
		}

Le placement des onglets s'effectue grâce à absolute.
La classe .tabcontent reçoit un z-index pour chaque h3.
Le chiffre le plus élevé (ici 203) place l'onglet # TAB1 devant.
Les comportements vont permettre maintenant de mettre, au passage de la souris, au premier plan l'onglet et le contenu de sa boîte, tout en faisant passer au second plan la boîte inactive :

#csstabs:hover h3, #tabs:focus h3, #tabs:active h3{
		background:#C4C0B4 url(none)
		}

#tabs:focus .tabcontent, #tabs:active .tabcontent{
		opacity:0;
		-webkit-transition :opacity .75s ease-in;
		overflow: visible/* on affiche la totalité du contenu */
		}

#tab1:hover h3,
#tab1:focus h3,
#tab1:active h3{
	z-index:204;background:#fff
	}
#tab1:hover .tabcontent,
#tab1:focus .tabcontent,
#tab1:active .tabcontent{
	z-index:203;
	background:#fff;
	opacity:1;
	height: auto/* pour que la boîte s'agrandisse automatiquement */
	}

#tab2:hover h3,
#tab2:focus h3,
#tab2:active h3{
	z-index:204;
	background:#fff
	}

#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
	z-index:203;
	background:#fff;
	opacity:1
	}

On donne une hauteur fixe et on masque le débordement dans l'état initial (ligne #32 overflow: hidden de la classe .tabcontent.
Au passage de la souris sur l'un des onglets on rend son contenu visible (ligne #66 overflow: visible) dans un boîte dont on rend la hauteur variable (ligne #79 height: auto).
Votre attention SVP : la Div qui n'est pas active est juste recouverte : étant un rigolo des CSS je ne sais pas s'il y a un moyen sans passer par Javascipt.
C'est la limite de cette solution : comme les boîtes s'affichent en recouvrement de l'une sur l'autre, si elles sont de hauteur inégale, il faut placer celle qui va recevoir le contenu le plus long dans la seconde boîte. Sinon, le contenu de la 1ère boîte apparaîtra sous la deuxième.

En outre, et bien évidemment, selon l'emplacement de la boîte dans la page, il vous faudra fixer les marges extérieures dans la div#csstabs et adapter ce qui l'entoure.
L'exemple en ligne vous inspirera.

Un peu de design maintenant avec les CSS3 :

Dans le code plus haut on utilise déjà la propriété opacity des CSS3 mais on va aller plus loin.
Tout d'abord avec un effet de transition sur le contenu quand on passe sur un autre onglet (superbe sous Chrome) :

#tab2:hover .tabcontent,
#tab2:focus .tabcontent,
#tab2:active .tabcontent{
	z-index:203;
	background:#fff;
	opacity:1;
	transition : opacity 2s ease-in;
	-webkit-transition : opacity 2s ease-in;
	-moz-transition : opacity 2s ease-in;
	height: auto

L'onglet avec des angles arrondis :

.rounded{
	background-color:#F5F4EF;
	border:1px solid #ccc;
	margin-bottom:10px;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-radius-bottomleft:5px;
	-webkit-border-radius-bottomright:5px;
	-webkit-border-radius-topleft:5px;
	-webkit-border-radius-topright:5px;
	border-radius-bottomleft:5px;
	border-radius-bottomright:5px;
	border-radius-topleft:5px;
	border-radius-topright:5px
	}

Et, enfin, l'effet d'ombre :

.shadow{
	box-shadow: 3px 3px 7px #777;
	-moz-box-shadow: 3px 3px 7px #777;
	-webkit-box-shadow: 3px 3px 7px #777
	}

Bien sûr il ne faut pas oublier de rajouter dans la balise h3 les classes correspondantes (rounded shadow) pour obtenir leurs applications. Maintenant si vous avez tout suivi vous disposez d'une boîte à onglets sans images de fond, sans Javascript et avec des effets CSS3.
Elle est pas belle la vie en HTML5 et en CSS3 ?

Lien

David Sparks est l'auteur de ce code.

• CSS3 Hover Tabs without JavaScript
  ATTENTION : pour les raisons que j'évoquais en tête du billet le code des CSS est différent du code originel.
  Il y a en outre des trucs ajoutés, d'autres enlevés... bref, ça vous fait 2 versions de boîtes à onglets pour le prix d'une.
• La démo ? C'est par là.
  Fiez-vous au code source de la démo. Il est plus certain.