Información sobre cómo hacer una página webPisos en Valencia - Alquiler y venta de pisos en valencia ¿Intercambias enlaces? ponte en contacto... Créditos rápidos en: Préstamos rápidos |
Pisos en Valencia - Alquiler y venta de pisos en valencia ¿Intercambias enlaces? ponte en contacto... Créditos rápidos en: Préstamos rápidos |
|
|
Estás en: Artículos Tablas redondeadas sin esquinas
En este curso no se pretende dar a conocer como se crear o manipular las tablas, sino que se pretende verlas desde un punto de vista diferente.
En este artículo voy a demostrar la forma de hacer una tabla con la apariencia de esquinas redondeadas.
Descarga gratuitamente el pack de programas Google |
||||
 Google Earth: Para ver imágenes vía satélite de todo el mundo!! |
||||
 Norton Security Scan: Detecta y elimina virus y gusanos de Internet. |
||||
 RealPlayer: Fantástico reproductor de videos de la gran mayoría de formatos |
||||
 Picasa: Encuentra, edita y comparte tus fotos en segundos. |
||||
 Google Desktop: Encuentra todos tus mensajes electrónicos, archivos, historiales web, etc. |
||||
 Firefox con la barra Google: Navega por Internet de forma rápida y segura. |
||||
 Skype: Haz llamadas de voz y vídeo gratis a cualquier persona que disponga de Skype |
||||
 StarOffice (incluye Java™): Procesador de texto, hoja de cálculo, presentaciones, etc. |
||||
 Adobe Reader: Ve, imprime y busca archivos en formato PDF mediante una interfaz rediseñada. |
||||
 Spyware Doctor: Detecta y elimina spyware, adware, troyanos y keyloggers. |
||||
 Barra Google para IE: Realiza búsquedas con Google desde cualquier web y bloquea publicidad!! |
||||
Descarga del Google pack: |
||||
Empezamos...
Muchas veces vemos paginas en que nos encontramos con tablas con las esquinas redondeadas. Pues esto se hace de una forma muy sencilla mira:
En la teoría:
El truco consiste en crear 4 imágenes pequeñas (20x20 pixeles aprox.) que se ponen en las esquinas de la tabla. Con esto es con lo que se le da un aspecto más ovalado a la tabla.
En la práctica:
Creamos una tabla por ejemplo 3x3:
Primero, y antes de todo, tenemos que tener muy claro el color exacto del fondo de la página, y el color de fondo de la propia tabla. Para mayor precisión con el color, lo manejaremos en hexadecimal.
En este ejemplo utilizaremos como color de la tabla el Naranja I (#FF9933)
A continuación con cualquier programa de diseño realizamos la siguiente imagen:
Programas que puedes utilizar: Photoshop, Ulead PhotoImpact, Corel draw, Freehand...
La imagen que se debe realizar es:
1 imagen de tamaño 20x20 pixeles que sea 1/4 de circunferencia cuyo color del relleno sea el mismo que el de la tabla. El color de fondo de la imagen (es decir, a parte restante del 1/4 de circulo) será transparente (sin color)
Con la práctica se ve mejor:
Comprueba como la parte que se deja transparente, deja traspasar el color de la tabla.
Observa varios ejemplo con la misma imagen:
Muy Importante: a continuación haremos cuatro copias, con 4 nombres diferentes,
La primera copia la dejaremos tal cual: esquina1.gif
La segunda copia la rotaremos 90 grados, de forma que quede así: esquina2.gif 
La tercera copia la rotaremos 180 grados, de forma que quede así: esquina3.gif 
La cuarta copia la rotaremos 270 grados, de forma que quede así: esquina4.gif 
Crearemos una tabla de 3x3 (celdasxcolumnas) e insertaremos las imágenes anteriormente creadas.
|
|
|
|
|
Realizamos ciertos retoques en la tabla:
Bordes a cero. Márgenes de celdas a cero. Espacio entre celdas a cero:
<table cellSpacing="0" cellPadding="0" width="xxx" border="0">
|
|
|
|
|
Le ponemos a la tabla su color de fondo:
|
|
|
|
Aquí su contenido |
||
|
|
A continuación se muestra un ejemplo, en el que el fondo de página es un color naranja algo saturado que el color utilizado en la tabla. En este caso, en lugar de poner el fondo de las imágenes como "transparente" se ha utilizado directamente el color que se iba a utilizar como fondo de la web
<< Volver a la página principal
Espero que la información le haya sido de utilidad.
Agradezco cualquier tipo de crítica, sugerencia y/o aportación sobre este artículo o la web en general.
Para ponerse en contacto, acceda a la Zona de contacto.