Desenredate.com Información sobre cómo hacer una página web

<< Volver a la página principal
Pisos en Valencia - Alquiler y venta de pisos en valencia



¿Intercambias enlaces? ponte en contacto...

Créditos rápidos en: Préstamos rápidos



Google
 


-> Estás en: Artículos

Tablas redondeadas sin esquinas

Enlaces de herramientas de GOOGLE:




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
mira todo el software que lleva de gran interés y gratis:

Google earthGoogle Earth: Para ver imágenes vía satélite de todo el mundo!!
Norton antivirusNorton Security Scan: Detecta y elimina virus y gusanos de Internet.
Real playerRealPlayer: Fantástico reproductor de videos de la gran mayoría de formatos
Organizador de fotosPicasa: Encuentra, edita y comparte tus fotos en segundos.
Google desktopGoogle Desktop: Encuentra todos tus mensajes electrónicos, archivos, historiales web, etc.
FirefoxFirefox con la barra Google: Navega por Internet de forma rápida y segura.
SkypeSkype: Haz llamadas de voz y vídeo gratis a cualquier persona que disponga de Skype
StartofficeStarOffice (incluye Java™): Procesador de texto, hoja de cálculo, presentaciones, etc.
Adobe readerAdobe Reader: Ve, imprime y busca archivos en formato PDF mediante una interfaz rediseñada.
Anti SpySpyware Doctor: Detecta y elimina spyware, adware, troyanos y keyloggers.
arra Google para IEBarra 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:



esquina

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:

esquina

Muy Importante: a continuación haremos cuatro copias, con 4 nombres diferentes,

 

La primera copia la dejaremos tal cual: esquina1.gif esquina
La segunda copia la rotaremos 90 grados, de forma que quede así: esquina2.gif esquina
La tercera copia la rotaremos 180 grados, de forma que quede así: esquina3.gif esquina
La cuarta copia la rotaremos 270 grados, de forma que quede así: esquina4.gif esquina



links-google

Crearemos una tabla de 3x3 (celdasxcolumnas) e insertaremos las imágenes anteriormente creadas.

esquina  
esquina
   
esquina  
esquina

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">


esquina  
esquina
   
esquina  
esquina

Le ponemos a la tabla su color de fondo:

esquina

esquina

Aquí su contenido
esquina
 

esquina


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.


Artículo realizado por: Sebas GVS. Editor de Desenredate.com

  

¿Intercambias enlace? Aqui tu enlace.

Pisos en Valencia - Pisos alquiler Valencia - Cisternas alimentarias - Préstamos rápidos y urgentes- Humor y diversión - Mantenimiento de una piscina