Tecnología de puertas correderas en CSS

Un avance en CSS del que se habla a menudo es la capacidad de apilar imágenes de fondo, lo que les permite deslizarse una encima de otra para crear efectos especiales. Según las reglas actuales de CSS 2.0, cada imagen de fondo requiere su propio elemento HTML. En muchos casos, el marcado típico ya proporciona una variedad de elementos que podemos usar como componentes generales de la interfaz.

Con un diseño simple, podemos hacerlo.

¿De dónde viene la innovación?

Muchas etiquetas de navegación basadas en CSS que he visto tienen en su mayoría las mismas características: un bloque de color rectangular, tal vez solo un contorno, sin borde para la etiqueta seleccionada actualmente, y la etiqueta cambia de color cuando el puntero del mouse se mueve sobre ella. ¿Es esto todo lo que CSS puede ofrecernos? ¿Una serie de cajitas y colores monótonos?

Antes de que CSS fuera ampliamente adoptado, habíamos visto muchas innovaciones en el diseño de navegación por pestañas. Forma original, mezcla de colores experta e imitación de muchas interfaces físicas del mundo real. Pero estos diseños a menudo se basan demasiado en imágenes con texto elaboradas de forma compleja o están empaquetados en tablas anidadas. Modificar texto o cambiar el orden de las etiquetas requiere un proceso complejo. Incluso es imposible estirar el texto o afectará en gran medida el diseño de la página.

Las barras de navegación de solo texto son más duraderas y se cargan más rápido que las barras de navegación de texto como imagen. De manera similar, incluso podemos agregar atributos alt a cada imagen. Para aquellos con baja visión, el texto sin formato se puede cambiar de tamaño libremente. No es sorprendente que las barras de navegación basadas en texto plano, diseñadas con CSS, estén de vuelta en el diseño web. Sin embargo, la mayoría de los diseños de barras de navegación basados ​​en CSS todavía no tienen sentido hasta el momento. Una tecnología adoptada recientemente (como CSS) puede permitirnos hacerlo mejor, sin perder el efecto de las etiquetas de tablas e imágenes mencionadas anteriormente.

tecnología de puertas correderas

Hermosa artesanía, componentes de interfaz verdaderamente flexibles y tamaño adaptable según el texto, podemos crearlo con dos imágenes de fondo independientes. Uno a la izquierda y otro a la derecha. Piense en estas dos imágenes como dos puertas corredizas que se deslizan juntas y se superponen para ocupar un espacio más estrecho, o se separan para ocupar un espacio más amplio, como se muestra en la siguiente imagen:

En este modelo, una imagen enmascara parte de otra imagen. Supongamos que colocamos contenido único alrededor de cada imagen, como esquinas redondeadas para las etiquetas. No queremos que la imagen superior oscurezca por completo la inferior. Para evitar que esto suceda, podemos hacer que la imagen de arriba (la de la izquierda en este ejemplo) sea lo más estrecha posible. Pero aún así asegúrese de tener un cierto ancho para mostrar la singularidad de un lado de la etiqueta. Si las esquinas exteriores están redondeadas, debemos controlar que la imagen de arriba tenga el mismo ancho que su parte del arco.

Si el objetivo aumenta de tamaño y excede el ancho que se muestra arriba, la imagen se estirará debido a los cambios en el tamaño del texto y la fuente, creando espacios antiestéticos. Lo que debemos juzgar es predecir cuál será esta escalabilidad. Si cambio el tamaño de fuente en el navegador, ¿crecerá el objetivo? En términos prácticos, al menos deberíamos estimar que el tamaño de fuente aumentará al 300%. Las imágenes de fondo también tienen que adaptarse a este crecimiento. Para el ejemplo anterior, configuramos la imagen inferior (derecha) en 400*150 píxeles y la imagen superior en 9*150 píxeles.

Si se estira la etiqueta, la imagen se desliza, la puerta se ensancha y se revela más imagen:

En este ejemplo, hice dos imágenes de etiquetas 3D delgadas y suaves en Photoshop, como se muestra al principio del artículo. Por un lado, el interior es brillante y el borde es más oscuro para representar la etiqueta actualmente seleccionada. Para aplicar este modelo de truco a las imágenes izquierda y derecha, necesitamos expandir el área cubierta por la imagen de la etiqueta y recortarla en dos partes:

El mismo enfoque se aplicará a la etiqueta denominada "actual". Una vez que tengamos estas cuatro imágenes (1, 2, 3, 4) podemos empezar a hacer nuestras etiquetas con marcado y CSS.

creación de etiquetas

Cuando analiza el uso de CSS para crear listas horizontales, encontrará que hay al menos dos formas de organizar los elementos de la lista en la misma fila. Ambos métodos tienen sus propios méritos, pero ambos requieren CSS para resolver la confusión causada por el diseño. Un método utiliza cuadros en línea, el otro utiliza flotadores.

El primer método, que puede ser más común, es mostrar todos los elementos de la lista en línea. La belleza del enfoque en línea reside en su simplicidad. Sin embargo, para la tecnología de puertas correderas de la que vamos a hablar, el método en línea tiene algunos problemas de interpretación en navegadores específicos. El método dos, en el que nos centraremos, consiste en utilizar elementos flotantes para organizar los elementos de la lista en la misma fila. Es frustrante que el comportamiento aparentemente contradictorio de los flotadores evada la lógica natural. Aún así, vale la pena discutir la comprensión básica de cómo lidiar con múltiples elementos flotantes y qué significa flotación confiable.

Usaremos otro tipo de elemento flotante para resolver el problema de disposición de elementos flotantes. De esta forma, el elemento padre abarca completamente al elemento hijo. Por lo tanto, podemos agregar color de fondo e imagen de fondo a la etiqueta. Es muy importante recordar que los elementos de texto que siguen inmediatamente a la etiqueta utilizan la función borrar en CSS para borrar objetos flotantes. Esto evita que las etiquetas flotantes afecten la posición de otros elementos en la página.

Comenzamos con el siguiente marcado:

<div id="encabezado">
<ul>
<li><a href="#">Inicio</a></li>
<li id="current"><a href="#">Noticias</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>

En realidad, el div #header también puede contener el logotipo y el cuadro de búsqueda. Para nuestro ejemplo, queremos acortar el valor de cada hipervínculo en la cadena de anclaje. Obviamente, estos valores deben contener correctamente la ubicación del archivo o directorio.

Empezamos a diseñar la lista posicionando el contenedor #header. Esto garantiza que el contenedor realmente actúe como un contenedor para contener los elementos de la lista que flotan en su interior. Dado que el elemento flota, también debemos declarar que su ancho es 100%. Agregue un fondo amarillo temporal para garantizar que el contenedor principal llene completamente toda el área detrás de la etiqueta. Asimismo, establezca las propiedades de texto predeterminadas para garantizar un estilo uniforme:

#encabezado {
flotador: izquierda;
ancho: 100%;
fondo:amarillo;
tamaño de fuente: 93%;
altura de línea: normal;
}

Ahora, también necesitamos establecer el valor de margen/relleno predeterminado para la lista desordenada en 0 y eliminar la marca delante del elemento de la lista. Cada elemento de la lista flota hacia la izquierda:

#encabezado ul {
margen:0;
relleno: 0;
estilo de lista: ninguno;
}
#encabezado li {
flotador: izquierda;
margen:0;
relleno: 0;
} Configure la cadena de anclaje para forzar la representación como un objeto de bloque y podremos controlar todos los estilos sin preocupaciones:

#encabezado a {
mostrar:bloquear;
}

A continuación, agregamos la imagen de fondo a la derecha del elemento de la lista (los cambios se muestran en negrita):

Ahora podemos colocar la imagen de la izquierda a la izquierda de la cadena del ancla (el elemento dentro del contenedor). También agregamos relleno, que agranda la etiqueta y aleja el texto de los bordes de la etiqueta:

#encabezado a {
mostrar:bloquear;
fondo:url("norma_izquierda.gif")
arriba izquierda sin repetición;
relleno: 5px 15px;
}

De esta forma conseguimos el efecto 2. Observe cómo tiene forma nuestra etiqueta. Aquí, los usuarios de IE5/Mac se sorprenderán de inmediato: "¡Dios mío, mis pestañas están apiladas verticalmente y se extienden a toda la pantalla!". ¡No te preocupes, te ayudaremos a resolverlo de inmediato! Por ahora, intente seguir los pasos a continuación o, si es conveniente, cambie temporalmente a otro navegador y el problema con la versión IE5/Mac se resolverá de inmediato.

Ahora que la imagen de fondo de la etiqueta general está completa, debemos reemplazar la imagen de la etiqueta "actual". Logramos esto agregando id="current" y una cadena de anclaje al elemento de la lista de objetivos. Dado que no es necesario cambiar la apariencia del fondo que no sea la imagen, utilizamos la función de imagen de fondo:

Colocamos la imagen en el fondo del contenedor #header (reemplazando el fondo amarillo original), movemos la imagen de fondo hacia la parte inferior y agregamos el color de fondo correspondiente al espacio en blanco encima de la imagen. Al mismo tiempo, elimine el relleno heredado del cuerpo y agregue 10 píxeles de relleno en los lados superior, izquierdo y derecho de ul:

#encabezado {
flotador: izquierda;
ancho: 100%;
fondo:#DAE0D2 URL("bg.gif")
repetir-x abajo;
tamaño de fuente: 93%;
altura de línea: normal;
}
#encabezado ul {
margen:0;
relleno: 10px 10px 0;
estilo de lista: ninguno;
}

Hacemos esto reduciendo el valor de relleno inferior de la cadena de ancla normal en 1 píxel (5px-1px = 4px) y luego agregando el relleno restado a la cadena de ancla "actual".

toques finales

Es posible que los observadores más atentos hayan notado las esquinas de las etiquetas blancas en el ejemplo anterior. Estas esquinas opacas se utilizan para evitar que la imagen de abajo se muestre a la de arriba. En teoría, podríamos intentar utilizar parte de la imagen de fondo para que se ajuste al fondo de la etiqueta. Pero nuestra etiqueta crecerá en altura si intentamos mover el color de fondo, la imagen de fondo se acortará. En su lugar, cambie la imagen para que las esquinas de la etiqueta sean transparentes. Si el arco tiene suavizado, utilizamos un color de fondo más uniforme alrededor de sus bordes.

Ahora que las esquinas se han vuelto transparentes, la imagen de la izquierda se mostrará a través de las esquinas de la imagen de la derecha. Para compensar, agregamos relleno (9px) al elemento del formulario que coincide con el ancho de la imagen de la izquierda. Ahora que hemos agregado relleno al elemento del formulario, debemos eliminar el mismo ancho para centrar el texto (15px-9px=6px):

#encabezado li {
flotador: izquierda;
fondo:url("derecha.gif")
arriba derecha sin repetición;
margen:0;
relleno: 0 0 0 9px;
}
#encabezado a {
mostrar:bloquear;
fondo:url("izquierda.gif")
arriba izquierda sin repetición;
relleno: 5px 15px 4px 6px;
}

Esto aún no ha terminado, porque la adición de 9 píxeles de relleno crea un espacio entre la imagen izquierda y el lado izquierdo de la etiqueta. Ahora que los bordes izquierdo y derecho de la "puerta" visible están conectados, ya no necesitamos mantener la imagen izquierda en la parte superior. Entonces, cambia el orden de las dos imágenes de fondo e inviertelas. También intercambie las dos imágenes utilizadas en la etiqueta "actual":

#encabezado li {
flotador: izquierda;
fondo:url("izquierda.gif")
arriba izquierda sin repetición;
margen:0;
relleno: 0 0 0 9px;
}
#encabezado a, #encabezado fuerte, #encabezado span {
mostrar:bloquear;
fondo:url("derecha.gif")
arriba derecha sin repetición;
relleno: 5px 15px 4px 6px;
}
#encabezado #actual {
imagen de fondo:url("left_on.gif");
}
#encabezado #actual a {
imagen de fondo:url("right_on.gif");
fondo de relleno: 5px;
}

Luego de completar esto, llegamos al Efecto 4. Tenga en cuenta que las esquinas transparentes crean un área en la que no se puede hacer clic en el lado izquierdo de la etiqueta. Esta área está fuera del texto, pero aún es perceptible. No es necesario utilizar imágenes transparentes en ambas caras de la etiqueta. Si no queremos crear esta área no válida, entonces tenemos que usar un color detrás de la etiqueta y luego reemplazar la imagen transparente en las esquinas de la etiqueta con este color. Ahora solo mantenemos esta esquina transparente.

Para el resto del problema, haremos todos los cambios a la vez: hacer el texto de la etiqueta más pesado, cambiar el texto de la etiqueta normal a marrón, cambiar el texto de la etiqueta "actual" a gris oscuro, eliminar el subrayado del enlace y finalmente cambie el color del texto al pasar el mouse hacia el mismo color gris oscuro. Después de una serie de cambios, veremos el efecto hasta ahora 5.

Solución consistente
Después de Effect 2, un problema que reconocimos es que en el modo de navegación IE5/Mac, cada pestaña se extiende y ocupa todo el ancho del navegador, de modo que las pestañas se apilan verticalmente. Esto no es lo que queremos.

En la mayoría de los navegadores, un elemento flotante se reduce a un tamaño mínimo de su contenido. Si un elemento flotante contiene una imagen o es una imagen, se reduce al ancho de la imagen. Si contiene solo texto, se reducirá al ancho del texto más largo que no esté encabezado.

Se produce un problema en las imágenes en IE5/Mac cuando se inserta un elemento de objeto de bloque de ancho automático en un elemento flotante. Otros navegadores aún minimizan los elementos flotantes e ignoran los elementos de bloque dentro del contenedor. Pero IE5/Mac no sigue este comportamiento, sino que expande los elementos de objetos flotantes y de bloque lo más amplio posible. Para resolver este problema, flotaremos la cadena de ancla al mismo tiempo, pero solo para IE5/Mac, para no abandonar otros navegadores. Primero, establecemos las reglas de flotación para la cadena del ancla. Luego, usamos el método de comentario de barra invertida para ocultar esta regla de modo que solo tenga efecto para IE5/Mac e ignore otros navegadores:

Haga inferencias de un ejemplo. Acabamos de practicar la técnica de la puerta corrediza, usando texto sin formato y una lista desordenada para crear etiquetas de navegación, con una pequeña cantidad de estilo. Se carga rápidamente, se puede mantener y el tamaño del texto se puede ampliar considerablemente sin arruinar la apariencia. No es necesario reiterar la flexibilidad de la tecnología de puertas correderas a la hora de crear estilos complejos de barras de navegación.

No hay nada en lo que no puedas pensar y nada que no puedas hacer. El efecto final nos muestra un ejemplo, pero nuestro diseño no puede limitarse a esto.

En algunos casos, las etiquetas no son necesariamente simétricas. Rápidamente hice una segunda versión de esta etiqueta, también con un estilo 3D sombreado, bordes angulares y una parte izquierda distintiva. Según la segunda versión, incluso podemos intercambiar las posiciones de las imágenes izquierda y derecha. Con este diseño detallado y control de imagen inteligente, podemos eliminar el borde inferior del botón para que la imagen de la etiqueta encaje mejor en el fondo, como se muestra en la tercera versión. Si su navegador admite el cambio entre varias hojas de estilo, puede incluso usarlo para cambiar libremente entre varias versiones de la barra de navegación.

Hay muchos otros efectos que no hemos mencionado. Una nota rápida: cambié el color del texto al pasar el mouse, pero se pudo reemplazar la imagen completa para crear un efecto de transformación más interesante. Incluso si hay dos elementos HTML anidados en el marcado, CSS se puede utilizar para lograr algunos efectos en los que aún no hemos pensado. Lo que creamos en este ejemplo es solo una barra de pestañas horizontal, pero las puertas corredizas se pueden usar en muchas otras situaciones. ¿Qué opinas?