Efecto redondeado en imágenes de Blogger

Esta vez vamos a reunir el efecto box-shadow y el border-radius para redondear imágenes de blogger de forma sencilla y de manera elegante.

Añadir a blogger

Lo unico que debemos hacer es dirigirnos a la administración de nuestro blog y seleccionamos la pestaña Plantilla y elegimos Edición de HTML, luego seleccionamos la casilla Expandir plantillas de artilugios y antes de la etiqueta </b:skin> añadimos este código:

[ #post-body img { border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.4); display: inline-block; max-width: 100%; moz-border-radius: 6px; moz-box-shadow: 0 1px 2px rgba(0,0,0,.4); position: relative; vertical-align: bottom; webkit-border-radius: 6px; webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4); } #post-body img:after { border: solid 1px #1b1b1b; border-radius: 7px; box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); content: ' height: 100%; left: -1px; moz-border-radius: 7px; moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); position: absolute; top: -1px; webkit-border-radius: 7px; wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3); width: 100%; } ]

Con eso obtendríamos un resultado como este:

Capacidad en Navegadores

Este truco más o menos funciona en cualquier navegador (por ejemplo, Chrome, Firefox y Safari) que apoya border-radius, box-shadow, :before and :after. Los navegadores no compatibles recurrirá a la imagen sin ningún tipo de estilos.

Creatividad

Como puede ver, se puede crear casi cualquier estilo con la combinación de: :before and :after elemento pseudo. puede compartir con nosotros los estilos mas creativos, por favor, compartir en los comentarios.