Existen muchas cosas que se pueden crear con círculos: Logos circulares, menús circulares… Hoy os mostraré como crear imágenes circulares mediante el uso de CSS3. La única pega que se le puede poner, es que la imagen aparecerá como fondo (background). Es decir, en teoría no se podría hacer este efecto en una etiqueta de imagen , así que el usuario no podrá llevarse esa imagen a su escritorio arrastrándola, aunque podemos hacer un pequeño truco para que esta posibilidad exista.

Código HTML

<div class="circular"></div>

Código CSS

.circular { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://www.tublog.com/tuimagen.jpg) no-repeat; }

Un circulo completo requerirá que el border-radius sea la mitad de la anchura/altura de tu imagen. Ponlo todo junto y tu imagen se mostrará de esta manera en Firefox, Safari y Google Chrome:

También puedes añadir al borde una sombra, quedando así:

El código CSS respectivo de la imagen circular con sombra es este:

.circular_shadow { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://www.tublog.com/tuimagen.jpg) no-repeat; box-shadow: 0 0 8px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); }

¿Puedo tener la posibilidad de arrastrarla al escritorio?

Sí. Si deseas que se pueda arrastrar la imagen al escritorio, tienes que añadir un trozo de código más en tu HTML:

<div class="circular"></div>

Y en tu CSS quedaría así:

.circular { width: 300px; height: 300px; border-radius: 150px; -webkit-border-radius: 150px; -moz-border-radius: 150px; background: url(http://www.tublog.com/tuimagen.jpg) no-repeat; } .circular img { opacity: 0; filter: alpha(opacity=0); }

Estándares

HTML 4.01 Transitional válido.

Ejemplo de su funcionamiento

Puedes probar estos ejemplos en el enlace que ofrezco a continuación: