Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Puertas correderas con CSS

Una técnica para crear menús a medida con solapas o pestañas

por Douglas Bowman

Una ventaja raramente mencionada de CSS es la capacidad de superponer imágenes de fondo, lo que permite pasar una sobre otra para crear ciertos efectos. El estado actual de CSS2 requiere un elemento separado de HTML para cada imagen de fondo. En muchos casos, el código típico para componentes comunes de interfaz nos proporciona varios elementos para nuestro uso.

Uno de estos casos es la navegación por pestañas o solapas. Ya es hora de cotnrolar esteos sistemas, que continuamente ganan popularidad como sistema básico de navegación en un sitio. Ahora que CSS tiene un soporte muy extendido, podemos mejorar la calidad y apariencia de las solapas en nuestro sitio. Probablemente sabes que las listas en CSS pueden emplearse para dominar una simple lista sin numerar. Quizá has visto incluso listas de éstas en forma de pestañas, con un aspecto similar al siguiente:

[ejemplo de solapas con bordes rectos y fondo uniforme.]

Y si pudiéramos tomar exactamente en mismo código de estas solapas y convertirlo en algo como:

[Solapas con bordes redondeados y un fondo sombreado con aspecto tridimensional.]

Con algo de estilo, es posible hacerlo..

¿Dónde está la innovación?

Muchos de los sistemas de solapas basados en CSS que he visto tienen las mismas características generales: bloques rectangulares de color, quizás un cortorno, un borde que desaparece en la solapa activa, un color cambia en el estado de pasar el ratón por encima. ¿Es eso todo lo que nos permite CSS? ¿Una serie de cajas y colores planos?

Antes de que CSS fuera ampliamente adoptado, empezamos a ver mucha innovación en el diseño de navegación. Formas creativas, mezclas sofisticadas de color e interfaces que imitan modelos reales. Pero estos diseños a menudo se basaban sobre todo en una compleja construcción de imágenes con el texto, o estaban construídos con múltiples tablas anidadas. Editar el texto o cambiar el orden de las solapas implicaba un proceso complejo. Cambiar el tamaño del texto era imposible o causaba problemas significativos con la compaginación.

La navegación basada en texto puro es mucho más fácil de mantener y se carga mucho más rápidamente que la navegación basada en imágenes como texto. Además, aunque podamos añadir atributos alt a cada imagen, el texto puro es incluso más accesible ya que puede cambiarse de tamaño por parte de los usuarios con visión limitada. No es una sorpresa que la navegación de texto, dotada de estilo con CSS, esté volviendo con fuerza al diseño web. Pero el diseño de solapas basado en CSS es en muchos casos un salto atrás en apariencia respecto de lo que solíamos hacer — ciertamente algo que no incluiríamos en una carpeta de trabajos personales de diseño. Una tecnología como CSS debería permitirnos crear algo mejor, sin perder la calidad del diseño de arreglos anteriores a base de tablas o pestañas creadas sólo con imágenes.

La técnica de puertas correderas

Componentes cuidadosamente elaborados, auténticamete flexibles que pueden expandirse y contraerse con el tamaño del texto, que pueden crearse si utilizamos dos imágnenes de fondo distintas. Una para la parte izquierda, otra para la parte derecha. Piensa en esas dos imágenes como si fueran unas puertas correderas que completan un acceso. Las puertas se deslizan y se superponen más para llenar un espacio estrecho, o se separan y se superponen menos para llenar un espacio más ancho, tal como muestra el diagrama siguiente:

[diagrama que ilustra el concepto del párrafo anterior.]

Con este modelo, una imagen cubre una porción de la otra. Asumiendo que tenemos algo único en la parte exterior de cada imagen, como la parte redondeada de una solapa, no queremos que la imagen delantera cubra completamente la imagen posterior. Para evitar que esto suceda, haremos la imagen delantera tan estrecha como sea posible. Pero la mantendremos con el ancho mínimo para revelar lo que hace único este lado. Si los bordes exteriores son redondeados, debemos hacer la imagen frontal sólo tan ancha como la parte curvada de la imagen:

[La parte redondeada de una imagen que se necesita para construir una solapa con esta forma.]

Si el objeto se hace más grande que el ancho mostrado arriba, debido a diferentes textos o tamaños, las imágnes se separarán, creando un vacío desagradable. Necesitamos tomar una decisión sobre el límite de expansión que vamos a permitir. ¿Cuánto pensamos que el objeto puede aumentar a medida que el texto se hace mayor en el navegador? Siendo realistas, deberíamos aceptar la posibilidad de al menos permitir un aumento del tamaño de un 300%. Neceistamos expandir las imágenes de fondo para compensar este aumento. En estos ejemplos haremos la imagen de fondo a la derecha de 400x150 pixels, y la imagen frontal, de 9x150 pixels.

Ten en cuenta que las imágenes de fondo sólo se muestran en la “abertura” disponible del elemento al que se aplican (área del contenido + espaciado o padding). Las dos imágenes están ancladas a los bordes exteriores de sus elementos respectivos. La porción visible de estas imágenes de fondo encaja dentro de la abertura para formar una solapa:

[ambas imágenes con un alto extra añadido en la parte inferior. La imagen de la derecha también tiene espacio extra añadido a la izquierda. Las únicas porciones visibles encajan perfectamente para crear la ilusión de una forma de solapa.]

Si forzamos la solapa a tener un tamaño mayor, las imágenes se separan, llenando una abertura mayor, revelando más de cada imagen:

[Las dos imágenes se separan revelando mayor porción del fondo, creando la ilusión de una solapa única.]

En este ejemplo, usé Photoshop para crear dos imágenes de solapa suaves, ligeramente tridimensionales, mostradas al principio del artículo. Para una de las solapas, el relleno se suavizó y el borde se oscureció — la versión más clara representará la solapa “activa”. Dado el modelo de esta técnica para las imágenes derecha e izquierda, necesitamos expandir el área que pueden cubrir y cortar la imagen en dos partes:

[imágenes para la parte izquierda y derecha]

Lo mismo debe ocurrir con la imagen más clara que representa la solapa activa. Una vez tenemos cuatro imágenes creadas, (1, 2, 3, 4) podemos pasar al código y el CSS para las solapas.

Creación de las solapas

Si explorar la creación de listas horizontales con CSS, te das cuenta que hay al menos dos métodos para disponer un grupo de elementos en fila. Cada uno tiene sus ventajas y sus inconvenientes. Ambos exigen tener en cuenta algunos aspectos curiosos de CSS que son con frecuencia liosos. Uno utiliza una caja dispuesta en línea (inline), otra utiliza flotación (floats).

El Primer Método — y posiblemente el más común — es cambiar el tipo de disposición de cada elemento de la lista para hacerlo “inline” (en línea). Este método es atractivo por su simplicidad. Sin embargo, causa algunos problemas de representación en algunos navegadores para la técnica de Puertas correderas que estamos tratando. El Segundo Método, que es el que vamos a tratar, utiliza cajas flotadas, floats para colocar cada ítem de la lista en fila horizontal. Los flotadores pueden ser también frustrantes. Su comportamiento aparentemente inconsistente desafía la lógica natural. Aún así, un conocimiento básico de cómo tratar con múltiples elementos flotantes y la posibilidad de “evitarlos” o contenerlos puede obrar maravillas.

Vamos a anidar diversos elementos flotados dentro de otro elemento contenedor flotado. Harems esto, de manera que el antecesosr más exterior que flota, envuelve completamente los bloques flotantes interiores. De esta manera somos capaces de añadir un color de fondo o /y una imagen detrás de nuestras solapas. Es importante recordar que el elemento siguiente después de nuestras solapas debe tener restaurada su posición utilizando la propiedad clear. Esto evita que las tablas flotadas afecten la posición de otros elementos de la página.

Empecemos con el código siguiente:

  <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, el div #header podría contener también un logo y una caja para buscar. En nuestro ejemplo, acortaremos el valor href de cada ancla. Obviamente, estos valors normalmente contienen direcciones de un archivo o un directorio..

Empezamos a dar estilo a la lista flotando el contenedor #header. Esto asegura que el contenedor realmente “contiene” dentro los elementos de la lista que también irán flotando. Ya que el elemento flota, necesitamos también asignarle un ancho del 100%. Añadimos temporalemnte un color de fondo amarillo para asegurarnos de que se extiende pra llenar toda el área detrás de las solapas. También especificamos algunas propiedades de texto por defecto, que harán que todo lo que esté dentro sea igual:

  #header {
    float:left;
    width:100%;
    background:yellow;
    font-size:93%;
    line-height:normal;
    }

Por ahora, también especificamos los valores por defecto de margen y espaciado, con margin/padding, para la lista no numerada y los elementos de la lista, en “0”, y eliminamos el marcador de las listas. Cada elemento se hace flotar a la izquierda:

  #header ul {
    margin:0;
    padding:0;
    list-style:none;
    }
  #header li {
    float:left;
    margin:0;
    padding:0;
    }

Disponemos las anclas como elementos de bloque, para que podamos controlar todos sus aspectos sin preocuparnos de la caja colocada en línea:

  #header a {
    display:block;
    }

A continuación, añadimos nuestra imagen de fondo derecha al elemento de la lista (los cambios o adiciones están en negrita):

  #header li {
    float:left;
    background:url("norm_right.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }

Antes de añadir la imagen de fondo izquierda, paramos para que puedas ver qué hemos hecho hasta ahora en el Ejemplo 1. (En el ejemplo, ignora la regla que he aplicado a body. Sólo establece valores básicos para el margen, espaciado, colores y texto.)

- - -

Ahora podemos colocar la imagen de la izquierda delante de la de la derecha, aplicándola al anclaje (nuestro elemento interno). Añadimos espaciado al mismo tiempo, expandiendo la solapa y haciendo que el texto se separe de los bordes:

  #header a {
    display:block;
    background:url("norm_left.gif")
      no-repeat left top;
    padding:5px 15px;
    }

Esto nos da el Ejemplo 2. Fíjate como las solapas han empezado a tomar forma. En este punto, debemos avisar a los posibles usuarios de IE5/Mac que, confundidos, deben preguntarse “¿Qué está pasando aquí? Las solapas están alineadas verticalmente y se estiran a lo largo de toda la pantalla.” No os preocupéis, vamos a arreglarlo pronto. De momento, intentemos seguir adelante y arreglaremos este problema a continuación.

- - -

Ahora que las imágenes están en su lugar para las solapas normales, necesitamos cambiar aquellas que vayan a mostrarse para la solapa “actual”. Lo conseguiremos fijándonos en el elemento de la lista que contiene id="current" y el ancla dentro de él. Ya que no necesitamos alterar ningún aspecto del fondo, más que la imagen, utilizamos la propiedad 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 a lo largo de la parte inferior de las solapas. Pero aplicando una propiedad de border al elemento antecesor #header no noa permitirá que se pueda sangrar la solapa actual sobre este borde. En lugar de esta opción, creamos una nueva imagen con el borde que queremos incluído en la parte inferior de la imagen. Mientras estamos en ello, también añadimos un gradiente sutil, tal como:

Aplicamos esta imagen al fondo de nuestro contenedor #header (sustituyendo el color amarillo que teníamos), colocamos la imagen de fondo abajo del elemento, y utilizamos un color de fondo que concuerde con la parte superior de esta nueva imagen. Al mismo tiempo, eliminamos el espaciado del elemento body que había introducido originalmente, y aplicamos un valor de 10 pixels de espaciado en los lados del elemento ul, excepto en la parte inferior:

  #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 efecto de solapa, necesitamos sangrar la solapa actual a través del borde, como mencioné antes. Podrías pensar que necesitaremos aplicar un borde a la parte inferior, concordando con el color del borde del fondo que tiene el elemento #header, y después cambiar el color del borde a blanco para la solapa actual. Sin embargo, si hacemos esto habrá un pequeño “escalón” visible. En lugar de eso, si alteramos el espaciado de las anclas, podemos crear esquinas perfectamente redondeadas dentro de la solapa actual, como muestra el ejemplo ampliado siguiente:

[Aumento de dos versiones de la solapa, el primero mostrando un pequeño escalón de 1 píxel si se emplea el borde inferior, el segundo mostrando un ángulo de 90 grados perfecto.]

Hacemos esto disminuyendo el espaciado inferior del ancla normal en 1 pixel (5px - 1px = 4px), y añadiendo este píxel otra vez al ancla actual:

  #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;
    }

El cambio permite que el borde inferior se muestre a través de las solapas normales, pero se oculte en la solapa actual. Esto nos lleva al Ejemplo 3.

Toques finales

Los ojos más agudos habrán notado unas esquinas blancas en las solapas, en los ejemplos anteriores. Estos bordes opacos evitan que la imagen de fondo se muestre a través de la esquina izquierda de la imagen enfrente. En teoría podríamos intentar hacer concordar las esquinas de las imágenes de las solapas con la porción del fondo que tienen detrás. Pero nuestras solapas pueden aumentar de altura, lo que empuja el fondo detrás de ellas más hacia abajo, cambiando el color de fondo que intentamos hacer concordar. En lugar de eso, haremos las esquinas de nuestras solapas transparentes. Si las curvas están suavizadas, haremos concordar las esquinas a un valor medio del color de fondo de detrás.

Ahora que las esquinas son transparentes, una parte de la imagen de la derecha se muestra a través de la esquina de la imagen de la izquierda. Para compensar esto, añadiremos un pequeño valor de espaciado a la izquierda al elemento de lista, equivalente al ancho de la imagen de la izquierda (9px). Puesto que el espaciado se añadió al elemento de lista, necesitamos eliminar un valor equivalente del ancla para mantener el texto 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 podemos dejarlo aquí, porque la imagen de la izquierda ahora se aleja del borde izquierdo de la solapa debido a los 9 pixels de espaciado añadidos. Ahora que los bordes interiores de la izquierda y la derecha que se hacen visibles y encajan uno con otro, no necesitamos mantener la imagen izquierda delante. Así que podemos cambiar el orden de las dos imágenes de fondo, aplicándolas a elementos opuestos. También necesitamos alternar las imágenes utilizadas para la solapa actual:

  #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;
    }

Cuando hacemos esto, llegamos al Ejemplo 4. Fijáos que los arreglos necesarios para hacer las esquinas transparentes crean un pequeño espacio muerto en la parte izquierda de la solapa donde no se puede hacer clic. El espacio muerto está fuera del área de texto, pero se nota ligeramente. Utilizar imágenes transparentes para cada lado de nuestras solapas no es necesario. Si preferimos no tener este espacio muerto, necesitamos un color sólido detrás de las soapas, y luego utilizar este color en la esquina de nuestras imágenes de solapas en lugar de hacerlas transparentes. Mantendremos las esquinas transparentes por ahora.

- - -

Para los ajustes que quedan, hacemos varios cambios a la vez: negrita para los textos de las solapas, hacer que la solapa actual tenga un color distinto, eliminar subrayado de los enlaces, y cambiar el estado de hover de los enlaces, como se representa en el Ejemplo 5.

Un arreglo para mayor consistencia

Después del ejempo 2, nos dimos cuenta de que había un problema con IE5/Mac. En la mayor parte de navegadores, flotar un elemento hace como si lo empaquetáramos. Se encoge al tamaño mínimo posible para los contenidos que tiene. Si un elemento flotado contiene (o es) una imagen, el flotador se encogerá a su ancho. Si contiene texto, el flotador se encogerá al ancho de la línea de texto más larga que no pueda saltar de línea.

Hay un problema en IE5/Mac cuando un elemento de ancho automático de nivel de bloque se inserta en un elemento flotante. Otros navegadores encogen el flotador tanto como pueden, son independencia del elemento de nivel de bloque que contenga. Pero IE5/Mac no lo hace en estas circunstancias. En lugar de eso, expande el flotador y el elemento de nivel de bloque al ancho máximo disponible. Para resolver esto, necesitamos flotar el ancla también, pero hacerlo sólo para IE5/Mac, a menos que queramos deshacerlo para otros navegadores. Primero añadiremos la regla siguiente al ancla, y después usaremos el arreglo de la barra invertida (Backslash Hack) para ocultar una nueva regla de IE5/Mac que elimina el flotador para todos los demás 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 */

IE5/Mac debería mostrar las solapas como es debido, como vemos en el Ejemplo 6. No debería haber cambiado nada para los otros navegadores que no sean IE5/Mac. Muchos problemas de IE5.0/Mac se han arreglado en la versión siguiente, IE5.1. Debido a esto, la técnica de Puertas Correderas es casi imposible de resolver en la versión 5.0. Dado que la versión de IE5.1/Mac ya hace mucho que está disponible, aquellos usuarios que todavía emplean OS 9 Mac con IE5.0 deben ser muy pocos o casi ninguno.

Variaciones

Sólo hemos entrado en la técnica de Puertas correderas para crear efectos de navegación con solapas y texto puro, codificadas con una lista no numerada, alterada con unos pocos elementos de estilo. Carga rápidamente, es fácil de mantener y el texto se puede aumentar o disminuir significativamente sin romper el diseño. ¿Necesitamos mencionar lo flexible que puede ser esta técnica para crear cualquier tipo de navegación sofisticada?

El uso de esta técnica sólo está limitado por nuestra imaginación. Nuestro ejemplo final representa sólo una posibilidad. Pero no debemos dejar que un ejemplo encasille nuestras ideas.

Por ejemplo, las solapas no tienen por qué ser simétricas. Rápidamente creé una segunda versión de estas solapas, que evita el aspecto 3D, optando por colores planos, formas angulares y una parte izquierda más ancha y más detallada. Podemos incluso cambiar el orden de las imágenes a derecha e izquierda, como muestra la Version. Con una planificación cuidadosa y una manipulación inteligente de las imágenes, el borde inferior se puede obviar y utilizar las imágenes de solapa con el fondo que va detrás de ellas, como se muestra en la Version 3, en plan Déco. Si el navegador soporta hojas de estilo alternativas, incluso se puede ver todo en un documento maestro, y cambiar entre las tres diferentes versiones alternando la hoja de estilo.

Otros efectos que no tocaremos aquí se podrían añadir a esta técnica. En el ejemplo descrito, cambié el color del texto para el estado de hover, pero se puede cambiar una imagen entera para crear interesantes efectos al pasar el ratón. Donde quiera que ya haya dos elementos de HTML anidados en el código, CSS se puede utilizar para superponer imágenes de fondo para efectos que ni siquiera hemos empezado a imaginar. Creamos una fila horizontal de solapas en este ejemplo, pero las Puertas correderas se podrían utilizar en muchas otras situaciones. ¿Qué puedes hacer con ellas?

Este artículo tiene una segunda parte en la que se explican más técnicas relacionadas.

Fundador y director de Stopdesign, Douglas Bowman se especializa en diseño simple, limpio y avanzado. Continuamente cuestiona y expande los límites de lo que es posible utilizando estándares web. Douglas fue el arquitecto del conocido rediseño de Wired News, pero promete no estancarse en esa reputación para siempre.

[ Este artículo ha sido traducido con permiso de A List Apart y su autor.]