Unidad 9. Avanzado: Esquinas redondeadas con borde


En la unidad ya hemos visto cómo crear las esquinas redondeadas con imágenes de fondo. Vamos a hacer lo mismo para crear la siguiente caja:

 

Lo primero que haremos, será crear las imágenes para las esquinas, que en este caso son: (red_naranja_lt.png), (red_naranja_rb.png), (red_naranja_lb.png) y (red_naranja_rt.png). Si quieres ver cómo las hemos creado, puedes seguir el videotutorial del tema.

La única diferencia con lo que habíamos hecho antes es el tamaño, que será de 10x10 px, y que hay un borde. Puede parecer poco, pero el borde es una gran diferencia. Si lo hacemos exactamente como antes, pero cambiando el alto de 25px a 10px, obtendríamos lo siguiente:

 

Esto se debe a que el borde está alrededor de la división, no dentro de ella.

Para conseguir el efecto que buscamos, debemos de desplazar un poco la imagen para que quede encima del borde. La propiedad que nos permite desplazar un elemento con respecto a su posición inicial es el posicionamiento relativo (position: relative;).

La idea es desplazar las divisiones que contienen las imágenes hasta colocarlas encima del borde. En el caso de la división con la imagen de la esquina superior izquierda (div.red_arriba), hay que desplazarla a la izquierda el grosor del borde (left: -1px) y arriba lo mismo (top: -1px). El div de la derecha (div.red_arriba div) no hará falta desplazarlo hacia arriba, porque ya hemos desplazado el div que contenía a este, y a la derecha habremos de desplazarlo el grosor + lo que lo habíamos desplazado a la izquierda (right: -2px;).

 div.redondo_borde {
   background-color: #f0d7b5;
   border: 1px solid #ff7600;
  }
 div.red_arriba {
   background-image: url(graficos/red_naranja_lt.png); 
   background-position: left top;   
   background-repeat: no-repeat; 
   height: 10px;  
   position: relative; 
   left:-1px; top:-1px;
  }
 div.red_arriba div {
   background-image: url(graficos/red_naranja_rt.png);
   background-position: right top;   
   background-repeat: no-repeat; 
   height: 10px;  
   position: relative; 
   right: -2px;  
  } 

 


En nuestro ejemplo, vamos a utilizar la misma estructura de divisiones que utilizábamos con div.redondo, pero al principal, en vez de asignarle la clase redondo, le asignaremos redondo_borde. Esto hace que que sólo tengamos que declarar las propiedades que son distintas entre redondo y redondo_borde, como son el estilo de la división principal, el alto de las divisiones anidadas (10px), la imagen que utilizan y su posicionamiento relativo.

Los estilos que hemos generado son los siguientes:

div.redondo_borde {
  border: 1px solid #ff7600;
  color: #3d2e2a;
  background-color: #f0d7b5;
}
div.redondo_borde div.red_arriba, div.redondo_borde div.red_arriba div, 
div.redondo_borde div.red_abajo, div.redondo_borde div.red_abajo div {
  height: 10px;
  position: relative;
}
div.redondo_borde div.red_arriba {
  background-image: url(imagenes/red_naranja_lt.png);
  left: -1px;
  top: -1px;
}
div.redondo_borde div.red_arriba div {
  background-image: url(imagenes/red_naranja_rt.png);
  right: -2px;
}
div.redondo_borde div.red_abajo {
  background-image: url(imagenes/red_naranja_lb.png);
  left: -1px;
  bottom: -1px;
}
div.redondo_borde div.red_abajo div {
  background-image: url(imagenes/red_naranja_rb.png);
  right: -2px;
}
div.redondo_borde div.contenido {
  margin: 0 10px;
}

Una vez definidos los estilos, los hemos aplicado a elementos de nuestro sitio: al div.cita de la página nosotros.html, y a la tabla de la página flores/index.html. Para hacerlo, hemos creado al estructura de divisiones (div.redondo, div.red_arriba, div.red_arriba div, div.contenido, div.red_abajo, div.red_abajo div) y hemos puesto el elemento (div.cita y la tabla) dentro del div.contenido. En el caso de la tabla, hemos editado su estilo (table#flores) para quitarle el borde y color de fondo que le habíamos dado.

   Inicio    




.