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.

Via http://www.cssblog.es

[5]: ” fondo”

Related Posts with Thumbnails
 

Comments are closed.

Premium WordPress Themes