DESARROLLADOR

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
Deshazte de las paginas con uso intensivo de graficos crea
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.

LEER  Conviértete en un experto en TI con 180 horas de capacitación por solo $19,97

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
1661087053 178 Deshazte de las paginas con uso intensivo de graficos crea
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.

Debido a que los estilos de otros botones se aplican a los hipervínculos, puedo usar diferentes comportamientos de enlace (por ejemplo, pasar el mouse) para activar diferentes estilos. Esto me permite crear un efecto de mouseover que cambia el fondo del botón de azul a gris oscuro cuando se pasa el mouse sobre él. Sin CSS2, este tipo de efecto normalmente requeriría el uso de dos gráficos, uno para el estado predeterminado y otro para el estado de mouseover.

Las actualizaciones del sitio web son más fáciles
CSS2 no solo produce un código más limpio, sino que también le permite actualizar su sitio web más rápido y más fácilmente que las páginas HTML simples. En lugar de cambiar manualmente un montón de páginas HTML codificadas, CSS2 le permite realizar cambios en todo el sitio simplemente actualizando sus hojas de estilo. En este ejemplo, utilicé una hoja de estilo en línea; sin embargo, debe usar una hoja de estilo externa para obtener todos los beneficios de CSS2.

Por ejemplo, si está cansado de la navegación izquierda y quiere probarla con la derecha, puede cambiar la información de estilo para la navegación izquierda y el cuerpo. Los cambios se reflejarán en cada página HTML que utilice la hoja de estilo.

Además, si desea cambiar el nombre de uno de los botones, no necesita crear un nuevo gráfico de botón. Simplemente cambie el texto en el archivo HTML.

Eso es todo: un diseño de página CSS2 compatible con todos los navegadores sin tablas, GIF espaciados o gráficos de botones, fácil de actualizar.

LEER  Windows Phone 7: enlazar datos personalizados de ListBox

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba