Esquinas redondeadas con sprites CSS

Desde la web CSS Globe nos traen un interesante tutorial, quizá no muy sencillo para principantes, que nos enseñará de qué manera podemos realizar esquinas redondeadas en nuestra web utilizando CSS.

Esta versión de las esquinas redondeadas consiste en realizar un div contenedor con 4 divs posicionados absolutamente en su interior, donde las imágenes de las esquinas se formarán utilizando únicamente sprites CSS.

1. Creando el sprite

1. El primer paso es crear un rectángulo en algún editor de imágenes. Recortar e importar una esquina y guardarla en una locación temporaria.
2. Realizar un documento  nuevo, importar la esquina, copiarla 3 veces y rotarla para crear cada una de las esquinas del rectángulo.
3. Realizar una imagen con las cuatro esquinas divididas por una línea roja de 1px.
4. Finalmente exportar la imagen y ya tendremos nuestro sprite.

2. El código HTML

La segunda gran parte del proceso es el código HTML. Antes que nada le daremos a nuestro div contenedor la clase de .roundedBox, así:

<div class="roundedBox"></div>

Ahora debemos añadir 4 divs que serán los que crearán nuestras esquinas y les deberemos dar la clase de .corner y además, una clase de acuerdo a sus respectivas posiciones:

<div class="roundedBox">
<strong>My content in roundedBox Type 1</strong>
<div class=”corner topLeft”></div>
<div class=”corner topRight”></div>

<div class="corner bottomLeft"></div>
<div class=”corner bottomRight”></div>
</div>

3. El CSS

Lo tercero, es el CSS. Debemos darle a cada esquina su posición absoluta y definir su alto y ancho:

.corner {position:absolute; width:17px; height:17px;}

Luego debemos darle estilo al div contenedor:

.roundedBox {position:relative;}

Además debemos darle padding porque de lo contrario las esquinas aparecerán sobre nuestro texto. Es importante que el padding de arriba+abajo sea igual a la altura de las esquinas.

Finalmente, definiremos la posición absoluta de cada esquina y su posición de fondo también:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}

.topRight {top:0; right:0; background-position:-19px -1px;}

.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}

.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

En la web nos brindan 4 estilos de cajas redondeadas distintas, para ver el tutorial completo haz clic aquí »

Fuente: CSS Globe