Deshazte de las páginas con uso intensivo de gráficos: crea efectos de borde CSS2 flexibles

Este artículo apareció originalmente en Builder.com.

En los primeros días del auge de Internet, escribí un código bastante feo para que las páginas se mostraran y se comportaran de la forma en que pensé que deberían hacerlo. Pasé horas preparando los innumerables archivos gráficos necesarios para crear efectos de mouseover y barras de menú, solo para descubrir que tardan demasiado en cargarse en un módem 28.8. Anhelo el día en que el ancho de banda fluya como el agua para que mis páginas puedan cargarse rápidamente.

Irónicamente, ahora que el ancho de banda es más abundante, muchos códigos gráficos están obsoletos. Afortunadamente, Cascading Style Sheets 2 (CSS2) nos permite usar sus propiedades de borde para recrear efectos usando código que solía requerir gráficos.

Diseño de página
Solía ​​pasar mucho tiempo jugando con las etiquetas TABLE, los GIF espaciadores y los colores de fondo para que mis diseños de página se vieran bien. Desafortunadamente, el código generado a menudo se infla innecesariamente. Cambiar el diseño después de la codificación también es difícil y requiere mucho tiempo.

Usando CSS2, especialmente sus propiedades de borde, es posible diseñar una página completa sin una sola etiqueta TABLE o GIF espaciado.usemos el diseño Figura A por ejemplo.

Figura A

Ejemplo de diseño de página web

Comenzaré creando el área de encabezado.El código para usar hojas de estilo en línea para la demostración debería verse así Lista A.

Este código crea un área azul claro de 75 píxeles de alto con un borde negro de 1 píxel en los cuatro lados. Para garantizar la compatibilidad con los tres navegadores principales y permitir que el diseño llene la ventana del navegador, no configuré una propiedad de ancho para el título.

La siguiente es el área de navegación superior.Para crear esta área, actualicé el código de la siguiente manera Lista B.

Justo debajo del título hay un área azul oscuro con un borde negro de 1 píxel en tres lados. No usé el borde superior en topnav porque usé el borde inferior del encabezado para dividir las dos áreas. Al igual que el título, no especifiqué un ancho para la navegación superior.

A continuación, agrego leftnav.El código ahora parece Listado C.

Ahora hay una barra gris de 200 x 450 px en el lado izquierdo de la página. Tiene un borde negro de 1 píxel a la izquierda y a la derecha, pero no tiene arriba ni abajo. Utilizará el borde inferior y el pie de página de topnav. Tenga en cuenta que leftnav usa la propiedad float. Al configurar float a «izquierda», leftnav siempre estará a la izquierda del elemento detrás de él. En este ejemplo, estará a la izquierda del elemento del cuerpo.

Después de agregar el elemento del cuerpo, el código es el siguiente Lista D.

El área principal tiene 450 píxeles de alto con un borde negro de 1 píxel a la derecha. body usa el borde inferior de topnav, el borde derecho de leftnav y el pie de página para dar la ilusión de un borde de 1 píxel en los cuatro lados. Al igual que con el encabezado y la navegación superior, no uso el atributo de ancho en el cuerpo.

El área final de este diseño es el pie de página.Para crear el pie de página, agrego el código a Lista E.

Tenga en cuenta dos cosas sobre el pie de página. Primero, no use la propiedad de límites. Dado que los bordes del pie de página y todos los demás elementos son negros, aparece la ilusión de un borde negro alrededor del pie de página. En segundo lugar, uso la propiedad clear. Cuando clear se establece en «ninguno», el pie de página no se verá afectado por la posición relativa de otros elementos. Por ejemplo, si el elemento del cuerpo usa «float:left» (lo que intentaría colocar el pie de página a la derecha del cuerpo), «clear:both» en el pie de página anularía la propiedad float y colocaría el pie de página en la parte inferior donde pertenece

Barra de navegación
Ahora que tengo el diseño de página básico hecho, puedo usar bordes CSS2 para crear botones falsos en el área de navegación superior. Figura B Muestra cómo se verá la página final.

Figura B

Diseño de página básico completo

Al igual que con los diseños de página, todos los efectos de botones falsos se pueden crear usando CSS2. Lista F Proporcione el código para agregar la barra de navegación.

Ahora hay una fila de cuatro botones en el área de navegación superior. Cada uno tiene un borde negro de 1 píxel a la derecha. El primer botón usa el borde del área de navegación superior para crear su borde izquierdo. Otros botones usan el borde derecho de su botón izquierdo para crear su borde izquierdo.

Usé el estilo de «botón fuerte» para resaltar el botón correspondiente a la página en la que se encuentra el usuario. Por ejemplo, si esta es mi página de inicio, quiero que el botón «Inicio» se muestre con un estilo diferente al de los otros botones.Usando el estilo de «botones fuertes», puedo crear una apariencia única para cualquier botón simplemente colocando un Marque alrededor del texto.