Como crear tabs redondos

>> //seccion/css/ -- 0 comentario /// Agregado el 2005-07-14 @ Por SparoHawk

Gracias a CSS ya tenemos la posibilidad de crear un sistema de links con tabs sin la necesidad de utilizar imágenes. Además de eso, también podemos crear los que muchos consideran un tabú: tabs redondos, ya que anteriormente eran dificiles de hacer.

Creando los tabs

Lo primero que vamos a hacer es crear los tabs. Durante este tutorial utilizaros css a un nivel bajo-intermedio, así que no será nada díficil. Aunque muchos no lo crean, la mejor manera de crear los tabs es hacer una lista horizontal. Si, estas leyendo bien, una lista horizontal, y es posible gracias a CSS. Utilizando la propiedad display:inline; de CSS podemos hacer que los elementos de la lista se coloquen uno al lado del otro, de manera horizontal. Aqui esta el HTML y el CSS que vamos a usar, este sólo hace los tabs, pero cuadrados, los pondremos redondos mas adelante:

CSS Code:

                 
#tab {
    background:#000;
    padding:5px 10px 2px;
    margin:0;
    list-style:none;
    font:bold 11px Verdana, sans-serif;
  }
  
  #tab li {
    display:inline;
    padding:2px 0;
    background:#fff;
  }
  
  #tab li a {
    padding:2px 10px;
    text-decoration:none;
  }
  
  #tab li a:visited {
    color:#000;
  }

HTML Code:

                 
<ul id="tab">
    <li><a href="">Anime</a></li>
    <li><a href="">Manga</a></li>
    <li><a href="">OST</a></li>
    <li><a href="">Misc</a></li>
  </ul>

» Ejemplo «

Creando los tabs redondos

Para crear los tabs redondos vamos a necesitar dos imágenes, así que utilizaremos estas: User posted image.

. Para lograr el efecto solo tenemos que alterar los estilos #tab li y #tab li a de esta manera:
Code:

                 
#tab li {
    display:inline;
    padding:2px 0 2px 10px; /*modificado*/
    background:#fff url("317-i.gif") top left no-repeat; /*modificado*/
  }
  
  #tab li a {
    padding:2px 10px 2px 0; /*modificado*/
    text-decoration:none;
    background:url("317-d.gif") top right no-repeat; /*agregado*/
  }

» Ejemplo del Resultado «

Listo eso es todo, ¿fácil no? Bueno, ahora agregare algo extra. Digamos que quiero ponerle un borde a los tabs para que se vean mejor o para que vayan con el diseño. Pensarás que es fácil, solo agregar un CSS para el borde y listo, pero no, no es así de sencillo, pero tampoco es cosa del otro mundo. CSS no puede hacer nada más que líneas derecha, asi que para las curvas de nuevo vamos a utilizar imágenes: User posted image.

. Además de esto, al HTML le haremos una modificación: pondremos el contenido de los <a> entre <span></span>, de la siguiente manera:

Code:

                 
<ul id="tab">
    <li><a href=""><span>Anime</span></a></li>
    <li><a href=""><span>Manga</span></a></li>
    <li><a href=""><span>OST</span></a></li>
    <li><a href=""><span>Misc</span></a></li>
  </ul>

Luego de eso, nuevamente modificaremos nuestro CSS de la siguiente manera:

Code:

                 
#tab li {
    display:inline;
    padding:2px 0; /*modificado*/
    border:1px solid #f00; /*agregado*/
    border-bottom-color:#fff; /*agregado*/
    background:#fff;
  }
  
  #tab li a {
    padding:3px 10px 2px 0; /*modificado*/
    margin-right:-1px; /*agregado*/
    text-decoration:none;
    background:url(esquina-b-d.gif) top right no-repeat; /*modificado*/
  }
  
  /*Todo esto agregado*/
  #tab li a span {
    padding:3px 0 2px 10px;
    margin-left:-1px;
    background:url(esquina-b-i.gif) top left no-repeat;
  }

» Ejemplo del Resultado «

Eso es todo. Ven que sencillo. Si se fijan notarán que utilice unos márgenes negativos. Eso es para que los bordes superior y laterales se unan bien con las dos imágenes que utilizamos para hacer la curvas, de manera que parezca como si todo esta junto y no dividido en tres. Espero que les haya sido de utilidad y espero que lo aprovechen. Recuerden que esto es sólo un tutorial para que aprendan, con ejemplos básicos. Hay muchas más cosas que puedes hacer, como utilizar imágenes en vez de texto. Intenta diferentes cosas, puedes que encuentres algo que te guste.

MC | #permalink 0 comentario