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][5] (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">
<img src="http://link-to-your/image.jpg" alt="" />
</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.
[5]: » fondo»
