Ya en julio de 1999 yo estaba en las listas de correo electrónico pontificar sobre las virtudes de las hojas de estilo. Algunas cosas nunca cambian.

Lo que ha cambiado es la forma en que pienso en CSS, y la estructura subyacente de (X) HTML a los que se aplica. Por ejemplo, me parece que la mayoría de las páginas en la web contiene un menú de enlaces en un área de navegación. Estos son a menudo marcado como una cadena de enlaces, a menudo en DIVs separados o párrafos. Estructuralmente, sin embargo, son una lista de enlaces, y debe ser marcado como tal.

Por supuesto, la razón de que no los marca en esa forma es que no queremos que una bala en la frente de cada eslabón de nuestra zona de navegación. En un artículo anterior señalé varias técnicas para el uso de CSS para el diseño de una página web. Una de las técnicas utilizadas para la manipulación de una lista de visualización horizontal y no vertical.

En este artículo, voy a demostrar cómo utilizar CSS para llevar listas de difícil de manejar bajo control. Es hora de que les diga a las listas de cómo comportarse, en lugar de dejar que vuele en su página web.
Preparando el escenario

Para efectos de este artículo, yo estoy usando listas desordenadas. El CSS puede aplicar el mismo, con resultados similares, así como listas ordenadas. Salvo disposición en contrario, todos los ejemplos en este artículo se utiliza el siguiente código para las listas

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5 haremos un poco más de tiempo para wrap</li>

</ul>

Cada lista simplemente se coloca dentro de un DIV diferentes, y el CSS está escrito de modo que el comportamiento de la lista es determinada por el DIV es pulgadas cada div tiene una regla de base:

#base {
border: 1px solid #000;
margin: 2em;
width: 10em;
padding: 5px;
}

#h-contain {
padding: 5px;
border: 1px solid #000;
margin-bottom: 25px;
}

Los dos ejemplos siguientes utilizan el mismo UL como en los ejemplos anteriores, pero sin el elemento de la lista final con su texto adicional. También incluyen una clase adicional que separa una de la LIS en la lista.

fuente: alistapart

Una ventaja de CSS que rara vez se mencióna es la habilidad de poner las imágenes de fondo en capas, permitiendo que se deslicen para crear ciertos efectos. CSS2 requiere elementos HTML distintos para cada imagen de fondo. En muchos casos código semánticamente correcto ya provee estos distintos elementos, suficientes por lo tanto para aplicar este truco.

Uno de estos casos es la navegación con pestañas. Es hora de retomar el control sobre las pestañas cuya popularidad para la navegación primaria en muchos sitios esta creciendo. Ahora que CSS es aceptado ampliamente, podemos subir la calidad y el aspecto de las pestañas de nuestros sitios. Probablemente estén al tanto de que se puede usar CSS para dominar simples listas desordenadas. Quizás hasta hayan visto listas estilizadas como pestañas de una manera similar a esta:

Que dirían si les dijese que con el mismo código HTML de las pestañas de arriba, podemos hacer algo así:

Con estilos simples, podemos.

¿Dónde esta la innovación?

Muchas de la pestañas estilizadas con CSS que he visto tienen el mismo aspecto general: rectangulos cuadrados de color, quiza con un borde, quiza con un recuadro, un borde desaparece para la pestaña activa, el color cambia en el estado :hover. ¿Esto es todo lo que CSS nos puede brindar? ¿Un puñado de cajas de colores?

Antes de la expansión de CSS, comenzamos a ver un montón de innovación en el diseño de navegación. Formas creativas, fusion de colores e imitaciónes de interfaces físicas del mundo real. Pero estos diseños dependían de una construcción compleja de imágenes mezcladas con tablas. Modificando el texto o el orden de las pestañas requerían un gran esfuerzo. Cambiar el tamaño de letra era imposible o causaba grandes desperfectos en el diseño de la página.

Navegación por texto puro es mucho más simple y carga mas rápido que usando imágenes. Ademas, aunque podemos poner atributos alt a cada imagen, texto puro es mucho más accesible ya que se puede agrandar el tamaño de letra para gente con problemas de vista. No es ningún misterio porque la navegación hecha con texto esta volviendo a la escena. Pero la mayoría de estas pestañas estilizadas con CSS siguen estando un nivel por debajo de lo que antes se podía conseguir, obviamente nada que se pueda incluir en un portfolio. Una nueva tecnología (como CSS) debería permitirnos crear algo mejor, sin perder la calidad gráfica de los modelos antiguos con tablas e imágenes incorporadas.

La técnica de puertas deslizantes

Hermosuras, componentes de interfaz verdaderamente flexibles que se expanden y contraen con el tamaño del texto son posible con dos imágenes de fondo. Una para la izquierda y otra para la derecha. Piensen que estas imágenes son como dos puertas deslizantes que completan una entrada. Las imágenes se acercan y se superponen para llenar un espacio poco ancho, o se separan para llenar un espacio mas ancho, como muestra el siguiente diagrama:

Con este modelo, una imagen cubre una porción de la otra. Asumiendo que queremos algo especial en la parte exterior de cada imagen, como una esquina redondeada, no queremos que la imagen superior cubra complemtamente a la inferior. Para evitar esto hacemos que la imagen de la izquierda sea lo mas fina posible. Pero lo suficientemente ancha como para que se vea el detalle especial:

Si el objeto se hace más grande que la anchura de las imágenes, por culpa de cambio de fuente o tamaño del texto, las imágenes se separaran y quedará un vacio feo. Tenemos que hacer una estimación de cual es la cantidad de amuento que tendrá que soportar la pestaña. ¿Cuanto creemos que podrá crecer el texto si se aumenta el tamaño? Realísticamente, debemos tener en cuenta de que el texto puede aumentar un 300%. Debemos, por lo tanto, hacer las imágenes de fondo más grandes para poder soportar ese incremento. Para nuestro ejemplo, haremos que la imagen de la derecha sea de 400×150px y la imagen de la izquierda sera de 9×150px.

Tengan en cuenta que las imágenes solo se ven en la zona delimitada por nuestra “puerta”. Las dos imágenes estan fijadas a sus respectivas esquinas. Las partes visible encajan dentro de la puerta para formar una pestaña redondeada:

Si la pestaña se agranda, las imágenes se separan, llenando una puerta más grande, revelando más de cada imagen:

Para este ejemplo, use Photoshop para crear dos pestañas tri-dimensionales que use más arriba. Para una use un relleno clarito y para la segunda lo hize más oscuro, la versión “light” será la usada para la pestaña activa. Usando esta técnica, necesitamos expandir el area de la imagen y cortarla en dos pedazos:

Lo mismo debemos hacer para la version “light”. Una vez que tengamos las cuatro imágenes, (1, 2, 3, 4) podemos pasar al código y el CSS de las pestañas.

Creación de pestañas

A medida que vayan explorando la creación de listas horizontales con CSS, se darán cuenta de que existen dos métodos para acomodarlos en una fila. Ambos tienen sus ventajas y desventajas. Ambos métodos son confusos y requieren un poco de paciencia. Uno usa display:inline y el otro usa position:float

El primer método, y el mas común, consiste en cambiar el display de cada item a inline. Este método es interesante por su simplicidad. Sin embargo, este método causa algunos problemas en ciertos navegadores. El segundo método es el que vamos a usar, usa float para poner cada elemento en su lugar, en una fila. Este método puede ser igual de frustrante. Su comportamiento aparentemente irregular no sigue ninguna lógica. De todas maneras, con una comprension básica de como usar multiples floats puede lograr maravillas.

Vamos a anidar varios elementos dentro del float. Hacemos esto para que los elementos esten limitados por el float, de esta manera podemos poner las imágenes de fondo en estos elementos y por lo tanto hacer que tengan las medidas de la pestaña. Es importante recordar que el siguiente elemento despues de la lista debe restaurar su posición usando la propiedad de clear. Esto evita que las pestañas afecten a la colocación de otros elementos en la pagina.

Comenzamos con el siguiente código:
<div id=”header”>
<ul>
<li><a href=”#”>Home</a></li>
<li id=”current”><a href=”#”>News</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>

En realidad, la div #header puede contener un logo y un formulario de busqueda. Para nuestro ejemplo, vamos a acortar el valor de href de cada link. Obviamente, estos valores serían de direcciónes normales.

Empezamos por estilizar nuestra lista por hacer que el #header flote. Esto ayuda a asegurar que el contenedor contenga la lista que también estara flotante. Ya que el elemento esta flotando, le ponemos una anchura de 100%. El fondo temporal amarillo es para asegurar que el #header se expanda para llenar el espacio detrás de las pestañas. Tambien agregamos unas propiedades para el texto, asegurandonos que todo quede igual:
#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

Por el momento, le asignaremos “0″ a todos los valores de margin y padding de la lista y sus items, también eliminamos el marcador de lista. Cada elemento se flota a la izquierda:
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}

Hacemos que todos los enlaces sean bloques para poder controlar todos los aspectos con mayora facilidad:
#header a {
display:block;
}

Luego, añadimos la imagen derecha al elemento de lista (los cambios estan en negrita):
#header li {
float:left;
background:url(“norm_right.gif”) no-repeat right top;
margin:0;
padding:0;
}

Ahora podemos colocar la imagen de la izquierda en frente de la imagen de la derecha, aplicandola al enlace. Asimismo añadimos padding, para expandir la pestaña y alejando el texto de los bordes:
#header a {
display:block;
background:url(“norm_left.gif”) no-repeat left top;
padding:5px 15px;
}

Una nota para los confundidos usuarios de IE5/Mac que se estarán preguntando “¿Qué esta pasando? Las pestañas estan apiladas y se expanden por toda la pantalla”. No se preocupen, ya llegaremos a ese punto. Por el momento, intenten seguir o cambien temporalmente de navegador si es posible.

Ahora tenemos las imágenes de fondo en lugar de las pestañas normales, tenemos que cambiar las imágenes usadas para la pestaña activa. Hacemos esto con un nuevo elemento id=”current” y le ponemos el link dentro. Ya que no tenemos que alterar nada mas que las imágenes de fondo usamos la propiedad de background-image:
#header #current {
background-image:url(“norm_right_on.gif”);
}
#header #current a {
background-image:url(“norm_left_on.gif”);
}

Necesitamos algún tipo de borde en la parte inferior de las pestañs. Pero aplicando border a #header no permitirá que la pestaña activa se posicione encima del borde. En cambio, creamos una imagen con el borde que queremos incluir en la parte inferior de la imagen. Ya que estamos, le ponemos un gradiente suave:

Aplicamos esa imagen como fondo de #header (en reemplazo del amarillo que habia previamente), empujamos la imagen contra el borde inferior y usamos el color que tenga dicha imagen arriba. Tambien, le sacamos el padding al elemento body que teniamos incialmente, y aplicamos 10px de padding arriba, a la derecha y a la izquierda de la lista:
#header {
float:left;
width:100%;
background:#DAE0D2 url(“bg.gif”) repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

Para completar el effecto de pestaña, necesitamos que la pestaña activa este por encima del borde. Lo lógico sería aplicar un borde inferior con el mismo color del borde de #header y luego cambiarlo para la pestaña activa. Pero si hacemos esto nos quedara un escalón de un píxel. En cambio, si cambiamos el padding dentro de la pestaña activa:

Hacemos esto decrementando el padding del enlace por un píxel (5px – 1px = 4px), y luego se lo sumamos a la pestaña activa:
#header a {
display:block;
background:url(“norm_left.gif”) no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url(“norm_left_on.gif”);
padding-bottom:5px;
}

Toques finales

Aquellos que tengan buena vista habrán notado que se ven las esquinas blancas de las pestañas. Estas esquinas opacas impiden que se vea el fondo. En teoría podriamos hacer que ese color fuese similar a la zona de la imagen de fondo, para que se disimule. Pero como queremos que nuestras pestañas puedan cambiar de tamaño esto seria imposible. Para soluciónar este problema hacemos que las esquinas de las pestañas sean transparentes. Si las curvas tienen anti-alising, las combinamos con un color de fondo similar al de la imagen de fondo.

Ahora que las esquinas son transparentes, un pedazo de la imagen de fondo de la derecha se ve a traves de la zona transparente de la imagen de la izquierda. Para evitar esto le ponemos un poco de padding izquierdo al elemento de lista equivalente a la anchura de la imagen de la izquierda (9px). Como ya teníamos un padding, tendremos que eliminar otra tanto al enlance para que quede centrado (15px – 9px = 6px):

#header li {
float:left;
background:url(“right.gif”) no-repeat right top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url(“left.gif”) no-repeat left top;
padding:5px 15px 4px 6px;
}

Sin embargo, no lo podemos dejar así tampoco, porque ahora nuestra imagen de fondo izquierda se aleja del borde de la pestaña unos 9px. Ahora que los lados interiores de ambas imágenes están juntas, no necesitamos que la imagen de fondo izquierda este arriba. Asi que podemos intercambiarlas, aplicandolas a los elementos opuestos. Necesitamos intercambiar las imágenes de la pestaña activa también:
#header li {
float:left;
background:url(“left.gif”) no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url(“right.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url(“left_on.gif”);
}
#header #current a {
background-image:url(“right_on.gif”);
padding-bottom:5px;
}

Un hack consistente

En la mayoria de los navegadores, cuando flotamos un elemento, este se achicara lo maximo posible. Si el elemento contiene una imagen entonces tendrá las dimensiones de la imagen.

Un problema se presenta para Mac cuando un elemento bloque de anchura indefinida se mete dentro del elemento flotado. Otros navegadores achicarían el elemento independientemente del tamaño de lo que hubiese dentro, pero Mac no lo hace. Lo que hace es exandir el elemento flotado lo maximo posible. Para soluciónar el problema tenemos que flotar el enlace, pero solo para Mac, para que no salten problemas en otros navegadores. Primero haremos que el enlace flote y luego usaremos el Commented Backslash Hack para esconder una nueva definición de Mac que elimina el float para los otros navegadores:
#header a {
float:left;
display:block;
background:url(“right.gif”) no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#header a {float:none;}
/* End IE5-Mac hack */

No debería haber ningun diferencia entre el ejemplo 5 y 6 para los otros navegadores. Notese que IE5.0/Mac sufre de muchos problemas que se arreglaron con IE5.1./Mac Por eso, este truco no sirve en la versión 5.0. Ya que la actualización a IE5.1/Mac ha estado disponible por algún tiempo la cantidad de Macs con OS 9 y IE5.0 debería ser infima.

Título Original: Sliding Doors of CSS
Autor: Douglas Bowman
Fuente: scourdesign