Como hacer círculos con CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Como hacer círculos con CSS3

CSS3 es todo un mundo nuevo a descubrir a la hora escribir nuestros estilo, una de las que más divertida puede parecer es la capacidad que tiene de crear formas y figuras solo limitado por tu imaginación. En el pasado a la hora de incluir bordes redondeados en nuestros sitios debíamos recurrir a imágenes, esta; si bien era una solución efectiva, agregaba peso a la carga de la página web. Ahora es tan simple de hacer con pocas líneas de código usando las técnicas de CCS3 y todo será interpretado por el explorador, lo mejor es que es aún mucho más fácil que hacerlo con imágenes.

Como ya dije las posibilidades son infinitas, podemos crear módulos, menús y hasta dibujar con solo código usando las propiedades ‘border-radius’. Además al ser un cuadro al que le asignamos un radio en las esquinas para que de la apariencia de un círculo, podemos también hacerlo de forma independiente a cada lado y así jugar un poco más con las propiedades. Aunque ahora solo veremos cómo hacer un círculo.

Para empezar desde HTML creamos un DIV al cual le asignaremos un ID llamado ‘circulo’.

Use el nombre ‘circulo’ por ser lo que haremos, pero pueden colocar el que quiera siempre que coincida con el estilo.
<html>
<div id="circulo"></div>
</html>

Ahora procedemos a agregar estilo en nuestra hoja CSS. Lo primero que agregamos será el ancho y el alto, estos deben ser iguales para que así podamos tener un círculo perfecto.

#circulo { 
   width: 140px;
   height: 140px;

Ahora procedemos a redondear las esquinas para que este termine pareciendo un círculo, para eso usamos la propiedad ‘border-radius’ y dos líneas adicionales que garantiza que se pueda ver el efecto en la mayoría de los exploradores modernos.

background:#008040; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;

El resultado sería este que vemos en la imagen

Etiquetas:

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs