Colores para esquinas redondeadas

En el artículo anterior se trataron las tablas con esquinas redondeadas. En este se explica cómo poner los colores a esas esquinas redondeadas, para que la parte que da la forma redondeada sea del mismo color, exactamente, del fondo sobre el cual se va a colocar la tabla. Unas herramientas muy efectivas para lograr este propósito son: la página Códigos hexadecimales para colores, y el programa PAINT. Los pasos a seguir son: 1.- En el cuadro inferior de la página mencionada, en Colores hexadecimales avanzados, en la casilla Insertar código se pega el código del color del fondo de la página en donde se va a colocar la tabla y se hace click en GO. 2.- En las casillas de los colores R (Red: rojo), G (Green:verde) y B (Blue: azul), aparecen unos números (tenerlos en cuenta).

3.- En PAINT se entra a: Colores ► Modificar colores ► Definir colores personalizados y en las casillas de los colores (Rojo, Verde y Azul) se ponen los números mencionados en el punto anterior (2).

4.- Este es el color que se le pone a la imagen en la parte que debe quedar invisible por ser del mismo color del fondo sobre el que se va a colocar la tabla. 5.- Se crean las cuatro esquinas, como ya se explicó, y se colocan en la tabla con el código mostrado en el artículo anterior. Nota: Es importante recalcar que la parte "invisible" de las esquinas deben ser exactamente del mismo color del fondo en donde se va a colocar la tabla.

Índice Tablas
Tablas básicas
Tablas avanzadas
Tablas con esquinas redondeadas
Colorear esdquinas redondeadas

◄Anterior | Siguiente►

Tablas con esquinas redondeadas

Las tablas con esquinas redondeadas se utilizan, por ejemplo, para resaltar alguna parte del texto, dentro del mismo, o una información relacionada, colocada en cualquiera de los costados del texto, izquierdo o derecho, o crear una barra lateral de enlaces. Esto se puede hacer con tablas normales, pero con esquinas redondeadas el diseño es más vistoso. Para crear una tabla con esquinas redondeadas simplemente se crea una tabla normal, en la que se coloca, en cada una de sus esquinas un gráfico que hace la forma redondeada. Estos gráficos pueden ser de dos,clases: Gráficos con una parte del mismo color del fondo de la tabla, que dibuja el borde redondeado, y una parte transparente que deja ver el color del fondo de la página en donde se está colocando la tabla. Gráficos con una parte del mismo color del fondo de la tabla, que dibuja el borde redondeado, y una parte del mismo color del fondo de la página en donde se está colocando la tabla. En el primer caso se pueden diseñar tablas de cualquier color, sin tener en cuenta el color del fondo de la página. En el segundo, además del color del fondo de la tabla, el gráfico debe tener también el color del fondo de la página. Aquí se tratarán las tablas del segundo caso ya que, aunque pareciera lo contario, son más sencillas de crear porque no es necasario agregar imágenes transparentes. Creación de las esquinas Con el programa PAINT es fácil diseñar las esquinas. Los siguientes son los pasos a seguir: Con las autoformas Rectángulo y Elipse se crea una circunferencia dentro de un cuadrado, teniendo presente que los lados del cuadrado deben ser tangentes de la circunferencia. Los cuatro espacios que deja libre la circunferencia dentro del cuadrado se rellenan con el mismo color del fondo de la página en donde se va a colocar la tabla. El círculo formado por la circunferencia se rellena con el color de la tabla que se va a crear. La figura así formada se divide en cuatro partes iguales. Se corta la figura, dejando solamente una de las partes en que se ha dividido, preferiblemente la superior izquierda. La parte que se ha dejado se va girando 90 grados y de esta forma se guardan las cuatro esquinas: superior izquierda, superior derecha, inferior izquierda e inferior derecha.

1 - 2 - 3 4 - 5 - 6

Estas son las esquinas resultantes del proceso anterior:

Se guardan en un archivo para después subirlas al blog cuando se cree la tabla.

Creación de la tabla Ahora se trata el código HTML necesario para crear una tabla con esquinas redondeadas. Contiene atributos y etiquetas que aseguran que se puede visualizar correctamente en todos los navegadores. La tabla contiene varias celdas dispuestas en dos filas y tres columnas. En las celdas de las esquinas se colocan las imágenes que hacen que los bordes aparezcan redondeados. En la celda central, que está expandida a dos filas con el atributo rowspan=2, se coloca el cuerpo de la tabla, con el texto, imágenes, etc.

• <table width=300 align="center" cellspacing=0 cellpadding=0 bgcolor="#bdbdbd" border=0 >
<tr>
<td width=11 valign="top" align=left bgcolor="#bdbdbd">
<img src="images/sup_izq.jpg" width="25px" height="25px" />
</td>
<td rowspan=2>
<br>
<br>
<br>
<center><B><BIG><font color="000000">TEXTO</font></BIG></B></center>
<br>
<br>
<br>
</td>
<td width=11 valign="top" align=right bgcolor="bdbdbd">
<img src="images/sup_der.jpg" width="25px" height="25px" />
</td>
</tr>
<tr>
<td width=11 align=left valign=bottom bgcolor="bdbdbd">
<img src="images/inf_izq.jpg" width="25px" height="25px" />
</td>
<td width=11 align=right valign=bottom bgcolor="bdbdbd">
<img src="images/inf_der.jpg" width="25px" height="25px" />
</td>
</tr>
</table>

Después de img src=" se deben colocar las direcciones de las imágenes de las esquinas creadas según explicación. Y en la celda del TEXTO todo lo que el usuario desee. Nota: En el artículo seguiente se explica cómo poner color a las esquinas redondeaddas.

Índice Tablas
Tablas básicas
Tablas avanzadas
Tablas con esquinas redondeadas
Colorear esdquinas redondeadas

◄Anterior | Siguiente►