Unidad 9. Imágenes (V)


9.5. Estilo redondeado

Si te fijas en el diseño de la página, verás que tiene muchas esquinas. Queda muy cuadrado. Quedaría más suave si pudiésemos redondear un poco las esquinas.

Los elementos de HTML son siempre rectangulares, y no hay ninguna propiedad de momento que nos permita redondear las esquinas. Sí existe la propiedad -moz-border-radius, que consigue este efecto. Pero de momento es una propuesta de Mozilla y sólo funciona en Firefox, por lo que no es útil si no se ve en el resto de navegadores. Aunque es posible que en la próxima revisión del CSS, esta propiedad se convierta en estándar.

Si buscas este tema en Internet, encontrarás muchas formas de cómo lograr este efecto. Más o menos complicadas, unas utilizando imágenes, otras librerías javascript, etc...

Nosotros vamos a utilizar un método, utilizando imágenes y CSS, para convertir estas divisiones:

 

En esto otro:

 

Se trata de dos elementos distintos. El primero, el de fondo claro sobre el fondo oscuro, y el segundo, el del borde naranja. Vamos a comenzar fijándonos en el primero:

Básicamente, lo que pretendemos hacer es simular el elemento redondeado, colocando en las esquinas estas imágenes: , , , y .

Así que el primer paso es crear nuestras imágenes. Hasta ahora habíamos utilizado GIMP. Pero se trata de un programa de retoque fotográfico, no de dibujo. Para crear gráficos, necesitamos un programa de dibujo que nos permita trabajar con gráficos vectoriales, como puede ser Illustrator o CorelDraw, de los que encontrarás cursos en aulaClic. Siguiendo en la línea del curso, nos hemos decantado por Inkscape, una herramienta totalmente gratuita y libre que puedes descargar desde su web.

Si necesitas ayuda con la descarga e instalación del programa, consulta este básico Básico.

Ahora, para crear las esquinas, puedes seguir el ejercicio paso a paso Crear esquinas redondeadas.

 

Una vez que tenemos las imágenes, vamos a ver cómo las colocamos. Tenemos una división, en este caso con la clase contenido.

En un principio, podemos pensar en poner las imágenes directamente en la división. Luego, podemos situarlas en las esquinas con posicionamiento absoluto. Podría ser una solución, aunque la idea es que el diseño sea independiente de la página, que si cambiamos la hoja de estilo, podamos volver a ver las esquinas angulares, por ejemplo, o la imagen de otro color.

Por lo tanto, vamos a introducir las imágenes utilizando CSS, y la única propiedad que puede mostrar una imagen es background-image. Y esta es la que utilizaremos.

Utilizando esta propiedad, es sencillo poner una imagen en una esquina de una división. Por ejemplo, para colocarla en la esquina superior izquierda, escribiríamos:

div {
  background-image: url(imagenes/red_lt.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 25px;
  border: red 1px dotted;
}

El problema de background-image es que sólo podemos poner una imagen por elemento. Pero si por ejemplo, tenemos un div dentro de otro, podemos asignarle a cada uno una imagen. En el siguiente ejemplo, le damos in borde a cada uno para que se vea, donde están, pero el de dentro no debe de llevar borde, porque si no las imágenes no quedan alineadas.

div {
  background-image: url(imagenes/red_lt.png);
  background-position: left top;
  background-repeat: no-repeat;
  height: 25px;
  border: red 1px dotted;
}
div div{
  background-image: url(imagenes/red_rt.png);
  background-position: right top;
  background-repeat: no-repeat;
  height: 25px;
  border: blue 1px dotted;
}

Utilizando esto, podríamos conseguir el resultado que buscamos superponiendo cuatro divisiones, y a cada una poniéndole su imagen de fondo. Sería una posible solución, si nos aseguramos de que como mínimo las divisiones tengan 50px de alto.

Pero nosotros vamos a variarlo un poco. La estructura que vamos a hacer es la del ejemplo anterior, a continuación, otro div donde introduciremos el contenido (texto, imágenes, etc...) y al final, otro div doble con las esquinas inferiores. Todo ello agrupado dentro de una división, que en nuestro ejemplo llamaremos div.redondo.

• Para ver cómo aplicamos todo esto a nuestro ejemplo, puedes seguir el ejercicio paso a paso Redondear esquinas con CSS.

 

También hemos creado otra caja redondeada para algunos elementos dentro del contenido de la página, como la tabla de las flores, o la cita de la página nosotros.html. Esta caja tiene alguna cosilla más, porque también tiene un borde. Puedes ver cómo lo hemos hecho en este avanzado Avanzado.

 

Puedes ver el aspecto de una página de nuestro sitio con lo visto hasta ahora pulsando aquí.


Enero-2010
Pág. 9.5

Atrás  Inicio  Adelante





.