Esquinas curvas
Principal Arriba Esquinas curvas Maquetacion

 

Un efecto muy habitual en muchos sitios web es el uso de tablas con esquinas curvas, habitualmente en las zonas correspondientes a los menús, pero también en tablas individuales, como los calendarios que ves a la derecha.

Para conseguir este efecto necesitas cinco imágenes como las siguientes:

1 2 3 4 5

En tu programa editor de imágenes favorito puedes dibujar un círculo del color y tamaño (en píxeles) deseado, a partir del cual recortar las cuatro secciones de círculo. Las imágenes resultantes debes guardarlas con formato gif transparente.

A continuación, sólo debes crear una tabla de 3x3 como ésta:

Imagen 1 Imagen 5 Imagen 2
Imagen 5 Aquí va el contenido de la tabla, que puede ser cualquier cosa: textos, imágenes, otras tablas anidadas, etc... Imagen 5
Imagen 3 Imagen 5 Imagen 4

Como ves, en las celdas de contorno de la tabla insertamos las imágenes correspondientes. El siguiente paso es fijar una altura y anchura para las celdas exteriores igual a la de las imágenes (los calendarios de la izquierda utilizan 5 pixeles de ancho y alto). A continuación debes alinear adecuadamente cada celda:

  • La celda que contiene imagen 1 debe alinearse a la derecha y a la parte inferior.
  • La celda que contiene Imagen 2 debe alinearse a la izquierda y a la parte inferior.
  • La celda que contiene imagen 3 debe alinearse a la derecha y a la parte superior.
  • La celda que contiene Imagen 4 debe alinearse a la izquierda y a la parte superior.

Por último, las celdas que contienen imagen 5 deben tener un color de fondo igual que el de las imagenes, para lograr el efecto de borde curvo.

Puedes usar una gran tabla redondeada que contenga tooooda tu página, o aplicar este efecto sólo a determinadas tablas:

El contenido de la celda central puede ser texto, imágenes o tablas anidadas dentro de la principal.

Diciembre

L M X J V S D
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

 

 

Noviembre

L M X J V S D
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Diciembre

L M X J V S D
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

00 Días de clase
00 Dás festivos

 

Enviar correo electrónico a  ferguweb@mixmail.com con preguntas o comentarios sobre este sitio Web.
Última modificación: 23 de December de 2002