Esquinas redondeadas para las capas de la web

Los bordes no quedan mal del todo, pero si consiguiéramos redondear las esquinas ya sería para sacar nota, verdad? Pues vamos allá.

No existe ninguna propiedad por el momento para conseguir mediante css ni html crear el efecto de redondeado de aristas o esquinas, pero yo que soy muy listo... he descubierto la forma de hacerlo de otro modo. Cómo? Simplemente dibujando el contorno redondeado en una imagen y colocándola después en la capa como imagen de fondo. De este modo no solo podemos conseguir el redondeado, sino también cualquier otra forma que seamos capaces de dibujar, como por ejemplo lazos, sombras de colores, etc, etc (el etc depende solo de tu imaginación).

Solo es necesario tener un poco de destreza para dibujar lo que necesitamos con un programa de dibujo, como el Paint del Windows, o similar. En el Foro CCTW hay una sección en la que se habla del Paint Shop Pro (PSP) que quizás te sea de ayuda para aprender a dibujar con el ordenador.

Para no mezclar mucho las cosas, partirémos aquí de algunas imágenes ya hechas. Las usaremos para este ejemplo de página web que estamos haciendo y te dejo a tí que crees las tuyas para que la pongas en tu propia web, oki?

Para empezar, cópiate estas dos imágenes y pégalas en la carpeta "objetos" para poder seguir estas lecciones. Por si no recerdas cómo se copiaban imágenes de otras webs, te recuerdo que solo tiene que hacer clic con el botón derecho del ratón sobre la imágen y escoger la opción "Copiar Imagen..." (o algo parecido). Luego seleccionas la carpeta de tu disco duro donde la quieres pegar (la carpeta objetos) y listo.

archivo de imagen para la web de ejemplo


archivo de imagen para la web de ejemplo

Se trata de imágenes con extensión gif y con fondo transparente. Guárdalas poniéndoles de nombre curva-superior.gif y curva-inferior.gif

A continuación veremos paso a paso como poner estas imágenes en la parte alta y baja de la página web para conseguir un efecto más profesional.