Una de las ventajas del CSS3 es porder aplicar bordes redondeados sin complicarnos la existencia, siempre y cuando quien vea la página use un navegador moderno, porque ya sabemos que en navegadores antiguos muchos estilos no son reconocidos.
Y una forma de poder usar estos bordes es con las imágenes de las entradas, a las que les podemos aplicar algunos efectos al pasar el cursor tales como sombreado y bordes redondeados acompañados de transiciones.
La declaración del borde redondeado es border-radius, y en ella podemos aplicar el borde redondeado a las cuatro esquinas de la imagen, o sólo a algunas de ellas.
A continuación verás unos ejemplos de estos bordes y cómo se comportan las imágenes al pasar el cursor sobre ellas.
Puedes usar el que más te guste, sólo copia el código, luego entra a la Edición HTML de la plantilla y pega dicho código antes de ]]></b:skin>
.post-body img {
padding:15px; /* Espacio entre la imagen y el borde */
background:#FFF; /* Color de fondo que se ve entre el espacio */
-moz-transition: all 1s;
-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 */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
