aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Conocemos muchos sistemas para conseguir unos tabs para nuestras aplicaciones, y todas ellas son geniales y con diseños muy cuidados. Esta forma no es especial por su diseño cuidado ni por sus efectos, sinó que están completamente hechos en CSS y para su creación no se han usado ningún hack.(Aunque si remarcan algunas propiedades, que podrían ser innecesarias).

Se basan en el uso de la propiedad z-index que mueve por eje Z los elementos de una página web. 

HTML 

<div class="container">
<ul class="tabs">
    <li id="current"><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
</ul>
<div>

CSS

ul.tabs {
	height: 25px; line-height: 25px; /* Igual al height de la imagen */
	list-style: none;
	padding: 0;
	display: table;	margin: 0 auto;  /* centrando */
}
ul.tabs li {
	float: left;
	margin-left: -20px; /* the overlap */
	position: relative; /* Permite que la propiedad z-index anteponga los elementos */
}
ul.tabs a {
	background: url(/off.gif) no-repeat;
	width: 139px; /* Igual al width de la imagen*/
	display: block; /* crítico */
	text-align: center;
}
ul.tabs li#current {
	z-index: 1;
	font-weight: bolder;
}
ul.tabs li#current a {
	background-image: url(/on.gif);
}
ul.tabs a {
	color: #00c;
	font-size: 0.8em;
        text-decoration: none;
}
ul.tabs li#current a {
	color: #c00;
}
ul.tabs li:hover, ul.tabs a:hover {
	z-index: 2;
	font-weight: bolder;
	background: url(/hovered.gif) no-repeat;
	color: #000;
}
div.container {
	border-bottom: 2px solid #ffcc00;
	height: 25px; /* Mantiene el espacio abajo cuando se cambia la resolución en FF */