Creando circulos con CSS.

Esto es solo una curiosidad que se me ocurrió ayer antes de dormir. Posiblemente ya se haya hecho antes, pero yo nunca he escuchado de ello. Se trata simplemente de crear círculos con CSS. No es nada del otro mundo, simplemente aprovechar un poco las características de CSS3, o en este caso mejor dicho, el ‘moz-border-radius que imita una característica de CSS3.

Creando un simple circulo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Buzu">
<meta name="date" content="2009-12-11T11:04:26-0800">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<style type="text/css">
 .circulo{
 border: 50px solid #ccc;
 -moz-border-radius: 60px;
 width: 15px;
 background-color: #CCC;
 height: 12px;
 }
</style>
</head>
<body>
 <p class="circulo"></p>
</body>

Como puedes ver, simplemente estamos aprovechando CSS y obtenemos un círculo. Naturalmente, esto solo funciona en firefox, pero puede ser adaptado de modo que funcione en la mayoría de los navegadores más populares. Ahora veamos si podemos hacer algo más con esos círculos:

Un mono de nieve:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta name="author" content="Buzu">
<meta name="date" content="2009-12-11T11:29:47-0800">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<style type="text/css">
 .cabeza{
 border: 50px solid #ccc;
 position: absolute;
 -moz-border-radius: 60px;
 top: 20px;
 left: 300px;
 background-color: #CCC;
 }
 .cuerpo{
 border: 70px solid #ccc;
 position: absolute;
 top: 110px;
 left: 280px;
 -moz-border-radius: 80px;
 background-color: #CCC;
 }
 .ojo{
 border: 5px solid #000;
 position: absolute;
 top: 50px;
 background-color: #000;
 -moz-border-radius: 6px;
 }
 .izquierdo{
 left: 330px;
 }
 .derecho{
 left: 360px;
 }
 .voca{
 border-bottom: 10px solid #F00;
 position: absolute;
 top: 80px;
 -moz-border-radius: 20px;
 width: 10px;
 left: 345px;
 }
</style>
</head>
<body>
 <p class="cabeza"></p>
 <p class="cuerpo"></p>
 <p class="ojo derecho"></p>
 <p class="ojo izquierdo"></p>
 <p class="voca"></p>
</body>
</html>

Podríamos incluso agregar un poco de javascript y hacer transiciones de cuadro a circulo o a otras formas, las posibilidades son muchas. A ti que se te ocurre?

3 thoughts on “Creando circulos con CSS.

Comments are closed.