Efectos de bordes redondeados en tus imágenes

En está ocasión me gustaría enseñaros una selección de efectos redondeados que he creado con border-radius y transition (transiciones CSS3) y algunas sombras (box-shadow), que podrás aplicar en tus imágenes de tus posts en Blogger, perfectamente. Todos sabemos, que una de las ventajas del CSS3 es poder aplicar bordes redondeados en las imágenes, pero el CSS3, no es compatible y no es visible en los navegadores antiguos, sólo en los más modernos. Dicho border-radius, es compatible en los navegadores siguientes: Firefox 3.5+, Safari 3.0+, Opera 10.5+, Chrome 4.1+, IE 9.0+, sólo en estos navegadores de última generación podrás visualizar sin problemas todas las ventajas que nos ofrece el CSS3 para diseñar.
La declaración del borde redondeado es border-radius, y en ella podremos declarar el borde redondeado que deseemos en las cuatro esquinas o sólo en algunas de ellas. En los ejemplos verás efectos hover para tus imágenes.
A continuación podrás visualizar unos ejemplos que he preparado de estos bordes redondeados y cómo ejecutan dicho efecto al pasar por encima el cursor en una imagen. Elige el efecto que más te guste, para añadir algunos de los ejemplos en Blogger, debes de ir a Edición HTML y buscar ]]></b:skin> y antes de dicha etiqueta, añadir cualquier código CSS que verás debajo de cada ejemplo:

Efecto correspondiente al ejemplo 1

.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#ddd; /* Color de fondo del borde que se ve entre el espacio */
box-shadow: 0px 0px 10px #000; /* Sombra y color de la sombra*/
-moz-transition: all 1s; /* transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0% 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000;/* Sombra y color de la sombra */
-moz-transition: all 1s; /* transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Efecto correspondiente al ejemplo 2

.post-body img {
border-radius: 50% 0; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra y color */
padding:15px; /* Espacio entre la imagen y el borde */
background:#ddd; /* Color de fondo del borde que se ve entre el espacio */
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* Con esto quitamos el borde redondeado */
-moz-transition: all 1s;
-webkit-transition: all 1s;  /* Transición */
-o-transition: all 1s;
cursor:pointer;
}

Efecto correspondiente al ejemplo 3

.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#ddd; /* Color de fondo del borde que se ve entre el espacio */
box-shadow: 0px 0px 10px #000; /* Sombra */
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Efecto correspondiente al ejemplo 4

.post-body img {
border-radius: 50%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* Con esto eliminamos la sombra */
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Efecto correspondiente al ejemplo 5

.post-body img {
border-radius: 45% / 20%; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
-moz-transition: all 1s;  /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Efecto correspondiente al ejemplo 6

.post-body img {
border-radius:108px 108px 108px 94px/228px 128px 128px 128px;
 height:428px;
 top:247px;
 width:450px;
 border:6px solid black;
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
border:6px solid black;
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:0;
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

Efecto correspondiente al ejemplo 7

óó

.post-body img {
width: 450px; height: 350px; /* Ancho y alto */
border-top-left-radius: 15em 1em; /* Borde redondeado */
border-bottom-right-radius: 15em 1em;
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
padding:0;
}
.post-body img:hover {
border-radius: 0; /* Con esto eliminamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
-moz-transition: all 1s; /* Transición */
-webkit-transition: all 1s;
-o-transition: all 1s;
padding:0;
cursor:pointer;
}

1. Estos efectos en tus imágenes se aplicarán a todas las imágenes de las entradas o los posts en Blogger. Si desearas usarlo solamente para las imágens que tú elijas, entonces cambia .post-body img por .redondo y .post-body img:hover por .redondo:hover.
2. Luego en el código HTML de tu imagen cada vez que quieras usar dicho efecto usa y agrega la clase siguiente en cada imagen que tu desees, la clase es redondo o cualquier selector que se te ocurra:

<img class="redondo" src="URL_de_la_imagen" />

Get free premium widgets for your blog and website.