Unidad 9. Ejercicio paso a paso: Redondear esquinas con CSS


Objetivo

Utilizando las cuatro imágenes creadas en el ejercicio anterior, vamos a crear los estilos para que el div.contenido de nuestro ejemplo, que actualmente tiene este aspecto:

 

Para que tenga éste:

 

Ejercicio:


Preparar el HTML.

  1. Abre una página de nuestro ejemplo con el editor, por ejemplo index.html.
  2. Editando el código fuente, crea un nuevo div, con la nueva clase redondo, que contenga al div.contenido, que ya existe.
  3. Dentro del div.redondo, pero antes de div.contenido, crea un dos divisiones, una dentro de otra. A la de fuera, asígnale la clase red_arriba. La de dentro no necesita clase, porque la podemos identificar como div.red_arriba div.
  4. Después del div.contenido, pero antes de cerrar el div.redondo, añade otras dos divisiones anidadas, la de fuera con la clase red_abajo.

La estructura habrá quedado:

<div class="redondo">
  <div class="red_arriba">
    <div></div>
  </div>
  <div class="contenido">
    ... texto ...
  </div>
  <div class="red_abajo">
    <div></div>
  </div>
</div>

Esto deberás de repetirlo en todas las páginas, y utilizarlo en las que creemos a partir de ahora.

 

Ahora, vamos con el estilo.

  1. Declara el selector div.redondo. Aquí pondremos las cosas generales, es decir, lo que ya habíamos declarado en div.contenido (margin: 0 20px 20px; background-color: #f5e4cc; clear: both;) excepto el padding, que lo omitiremos.
  2. Todos las divisiones que harán las esquinas, tienen unas propiedades comunes. Vamos a declararlas todas juntas utilizando el selector div.red_arriba, div.red_arriba div, div.red_abajo, div.red_abajo div. Las propiedades son el alto de la imagen (height: 25px;) y que no se repita la imagen (background-repeat: no-repeat;).
  3. Lo siguiente es, para cada uno, declarar su selector, qué imagen utiliza (background-image) y en qué posición la colocamos (background-position. Estos son los estilos: 
    div.red_arriba {
  background-image: url(imagenes/red_lt.png);
  background-position: left top;
}
div.red_arriba div {
  background-image: url(imagenes/red_rt.png);
  background-position: right top;
}
div.red_abajo {
  background-image: url(imagenes/red_lb.png);
  background-position: left bottom;
}
div.red_abajo div {
  background-image: url(imagenes/red_rb.png);
  background-position: right bottom;
}
  4. Al div.contenido, le vamos a dar a derecha e izquierda un margen, igual al tamaño de la imagen, declarando el estilo div.redondo div.contenido {margin: 0 25px;}.
  5. Borra el estilo div.contenido que habíamos creado en temas anteriores.
  6. Por último, probamos la página y vemos si hay que hacer alguna corrección adicional. En este caso, vemos que queda mucha separación encima del h2. Edita el selector h2 y quítale el margen superior (margin-top: 0;).
    Inicio




    Página inicial  Cursos Informática Gratuitos