Si en el anterior artículo, hablábamos de como redondear las esquinas de nuestras cajas, con un ancho fijo, ahora llega el momento de ver como lo haríamos para un contenedor o caja de ancho variable. Para este caso, en vez de utilizar las típicas esquinas redondas, he seleccionado otro diseño, concretamente una simulación de un papel para apuntar, pero la técnica es exactamente igual, yo sólo he cambiado las imágenes. Veamos el marcado:
<div class="sidebox">
<div class="sidebox-outer">
<div class="sidebox-inner">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Sed vel ligula. In a lectus. Maecenas convallis
nisl eget nisl. Quisque pellentesque adipiscing felis.
Proin ullamcorper convallis orci. In in arcu. Nulla enim
diam, sagittis in, dignissim eu, feugiat eu, nisi. Etiam
dictum eleifend arcu. Praesent bibendum massa non sem.
Cras mollis, velit id pellentesque faucibus, est ante
ultrices justo, eget tristique elit lectus sit amet purus.
Cras ac augue sit amet ligula pretium dignissim. Donec id
nisl. Vivamus quis nulla sed massa consectetuer hendrerit.</p>
<p>Curabitur commodo elit ut quam. Proin nec nisi. Nulla
facilisi. Aliquam sagittis ornare tellus. Donec eget turpis.
Nunc congue. Aliquam erat volutpat. Mauris tincidunt mi a
leo. Curabitur vulputate tincidunt turpis. Pellentesque
ullamcorper dolor in arcu. Vestibulum pede.</p>
</div>
</div>
</div>Una estructura muy simple. Un contenedor exterior, que evidentemente nos sirve de base para los demás, y 2 interiores que hacen de soporte para las imágenes, pero se ve mejor con el CSS:
.sidebox {
width: 50%;
margin: 0 auto;
background: url(img/bottom-left.gif) no-repeat left bottom;
text-align: left;
}
.sidebox-outer {
background: url(img/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.sidebox-inner {
background: url(img/top-left.gif) no-repeat left top;
padding-left: 10px;
margin-bottom: 15px;
}
.sidebox h2 {
background: url(img/top-right.gif) no-repeat right top;
padding-top: 8%;
margin: 5px 0 0 0;
}
.sidebox h2, .sidebox p {
padding-left: 8%;
padding-right: 8%;
}El contenedor exterior .sidebox, lleva un ancho variable de un 50% según la ventana del navegador. Nos hace de contenedor para la imagen más grande, la inferior izquierda, que como es normal, colocamos en este sitio, y no la repetimos. Esta imagen es la que hace el trabajo más duro para adaptar tu contenedor a la pantalla. Según el máximo que imaginemos que nuestro contenedor se va a expandir, horizontal y verticalmente, daremos un ancho y un alto a nuestra imagen inferior izquierda. La siguiente clase .sidebox-outer contiene la imagen inferior derecha, que se irá desplazando hacia la derecha según sea el ancho de la ventana. Con el padding logramos salvar el descuadre del texto. Nuestro .sidebox-inner contiene la esquina superior izquierda, que se une a la inferior izquierda para comenzar a formar una imagen, que es lo que pretendemos. Nos falta una imagen, la esquinita superior derecha, que se la colocamos al título de nivel 2 que tenemos dentro. EL padding y el margin cuadran el título a nuestro antojo. Finalizamos con dando un poco de aire a nuestro texto. No puede ser más fácil. Si no lo veis claro, este es el ejemplo que hemos realizado.
Etiquetado como: blog, CSS, design, esquinas, html, marcado, XHTML
ArtÃculos relacionados
