Scour Design. Tutoriales de CSS. Puertas deslizantes con CSS
\n";
}
}
}
lecturas();
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.
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.
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 400x150px y la imagen de la izquierda sera de 9x150px.
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.
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:
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:
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:
Hacemos que todos los enlaces sean bloques para poder controlar todos los aspectos con mayora facilidad:
Luego, añadimos la imagen derecha al elemento de lista (los cambios estan en negrita):
Antes de añadir la imagen de la izquierda, hacemos una pausa para ver como va todo en el ejemplo 1 (Ignoren la regla para body. Solo pone unos valores basicos para margin, padding, colores y texto).
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:
Esto nos da el ejemplo 2. 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:
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:
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:
El cambio permite que se vea el borde en todas la pestañas menos en la que esta activa. Esto nos lleva al ejemplo 3.
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):
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:
Una vez que hayamos hecho esto, llegamos al ejemplo 4. Nótese que los trucos hechos para que las esquinas sean transparentes han creado un pequeño espacio muerto donde el link no se puede abrir. El espacio esta fuera de la zona de texto, pero se nota un poco. Usar esquinas transparentes no es necesario. Si no queremos tener este espacio muerto, podemos usar un color plano como fondo para #header, y usar es color para las esquinas. En el ejemplo seguiremos con las esquinas transparentes.
Para los siguientes pasos vamos a hacer algunos cambios: todo el texto en negrita y marron oscuro, texto de la pestaña activa en negro, quitar subrayado y cambiar el color del texto para el estado :hover a gris oscuro. Podemos ver todos los cambios en ejemplo 5.
Despues del ejemplo 2, nos dimos cuenta de un problema con IE5/Mac donde las pestañas se estiraban por toda la pantala y aparecian apiladas verticalmente. Obviamente no era lo que queriamos.
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 IE5/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 IE5/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 IE5/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 IE5/Mac que elimina el float para los otros navegadores:
IE5/Mac deberia ahora mostrar las pestañas correctamente, según el ejemplo 6. 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.
Acabamos de ver como aplicamos la técnica Puertas deslizantes a una lista para crear pestañas. Carga rapido, es facil de mantener y el texto puede cambiar de tamaño sin romper el diseño. Evidentemente, esta técnica es muy flexible y con solo un par de modificaciónes podemos hacer todo tipo de menues.
El uso de esta técnica solo esta limitado por nuestra imaginación. Nuestro ejemplo final representa solo una posibilidad. No debemos dejar que el ejemplo marque los limites.
Por ejemplo, las pestañas no tienen por que ser simétricas. En la Versión 2 se puede ver como las pestañas tienen bordes irregulares. Incluso podemos cambiar el orden de las imágenes como se puede apreciar en la versión 2. Incluso podemos eliminar el borde inferior y hacer que las pestañas imiten el fondo como se puede ver en la Versión 3. Si el navegador soporta hojas de estilo alternativas, pueden ver todos los ejemplos en una página e ir alternando los ejemplos.
Otros efectos que no hemos visto se pueden aplicar a esta técnica. En mis ejemplos cambié el color de los enlances para :hover, pero también se puede hacer con las imágenes. Donde haya dos elementos anidados se puede aplicar este truco, se puede usar CSS para combinar imágenes de fondo y crear efectos nunca vistos. Hemos creado una fila horizontal de pestañas con este truco, pero las puertas deslizantes se pueden usar en muchas otras situaciónes. ¿Qué puedes hacer tú?
Tutorial licenciado bajo Creative Commons.
