Sombra Circular Para Imagen

Seguramente maquetando más de alguno se habrá vuelto loco a la hora de hacer una sombra circular a un icono, normalmente flotante. Para resolverlo la práctica más sencilla es tomando una sombra de tipo bitmap y posicionarla debajo de la imagen. Ésto podría servirnos si se plantea compatibilidad con navegadores viejos o que no soportan CSS3.

CSS3

En CSS3 disponemos de una serie de nuevas funcionalidades en las que se encuentra box-shadow , que sirve para crear sombras. Las sombras son para las etiquetas, que son cuadradas, pero ésto no es problema si lo combinamos con la propiedad border-radius, en la cual podemos indicar cuanto de redondo queremos que sean las esquinas de la etiqueta. La sombra generada se adaptará a la silueta de la etiqueta.

Algunas veces puede que la imagen escogida no encaje bien, para solucionar eso habría que prescindir de la etiqueta img y trabajar con el background-image, para asignar una imagen, el background-size, para configurar el tamaño de la imagen (no de la etiqueta) y por último hacer un background-position : center.