Cajas de Texto con esquinas Redondeadas
CSS Workshop - Taller CSS 02
Introducción
En este segundo taller de CSS vamos a aprender a realizar Cajas de Texto con esquinas redondeadas. Lo que los ingleses llaman "Rounded Box".
Para ello vamos a utilizar estilos (CSS) y XHTML.
Podéis ver el resultado aquí y si no os gusta podéis dedicar vuestro tiempo a cosas más productivas :).
Código (X)HTML
El esqueleto del código (X)HTML de nuestra página es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Workshop - Taller CSS 02</title>
<link rel="stylesheet" href="css-02.css" type="text/css" />
</head>
<body>
<h1>Cajas con esquinas Redondeadas</h1>
<h2>Taller de CSS-02</h2>
<hr />
<!-- Begin of Rounded Box -->
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<!-- Begin of Rounded Box Content -->
<div class="rbcontent">
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis
ornare ultricies libero. Donec
fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta
magna libero sed libero. Mauris sed leo.
Aliquam aliquam. Maecenas vestibulum.</p>
</div>
<!-- End of Rounded Box Content -->
<div class="rbbot"><div></div></div>
</div>
<!-- End of Rounded Box -->
<hr />
<h3>© 2007. Fausto Alava-Moreno. All Rights Reserved</h3>
<h4>Cortesia de http://fausto.alava.name</h4>
</body>
</html>
Código CSS
El esqueleto del código (X)HTML de nuestra página es el siguiente:
@import 'core.css';
/*****************************************************************
* *
* Estilos para las Cajas con esquinas Redondeadas *
* *
*****************************************************************/
.rbroundbox {
background: url(images/nt.gif) repeat;
}
.rbtop div {
background: url(images/tl.gif) no-repeat top left; }
.rbtop {
background: url(images/tr.gif) no-repeat top right;
}
.rbbot div {
background: url(images/bl.gif) no-repeat bottom left;
}
.rbbot {
background: url(images/br.gif) no-repeat bottom right;
}
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent {
margin: 0 7px;
}
.rbroundbox {
width: 50%; margin: 1em auto;
}
Epílogo
Para cualquier sugerencia de mejora, errores, critica constructiva o destructiva, por favor utiliza el formulario de contacto de mi sitio.
Si te interesa el taller, está disponible para descarga como archivo pdf.
También puedes descargar los ficheros de ejemplo del taller y así evitarte tener que teclearlos.
Gracias por tu tiempo y tus sugerencias.
Nos vemos en la próxima entrega de CSS Workshop.
Fausto Alava-Moreno
Última modificación: 2 de Junio de 2007.
Ultima Modificación: