Efectos en todas las imagenes del blogs con CSS3

Para quienes se preguntaban como hacer que las imagenes de todas las entradas tengas bordes redondos,
bueno vamos a aprender a agregarles en efecto de bordes redondeados a las imagenes de nuestro blogs,

Para darle este toque somplemente usaremos CSS3, la cual nos permite hacer esto mediante la declaracion de border-radius
con agregaremos los bordes.

Esto sera sivible siempre y cuando quien vea la página use un navegador moderno

Los estilos los agregaremos a la declaracion

.post-body img {-----------
---------Aqui los estilos-------
----------------------------
}

.post-body img:hover {-----
------Aqui los estilos al pasar en cursor-------
-------------------------------
}

Nota: es por si quieres hacer tus propios estilos o simplemente modifica cualquiera de los ejemplos


Veamos los siguientes ajemplos:

Para agregarlo a sus imagenes simplemente copia 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 {
border-radius: 10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
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;
}

o tambien podemos aplicar algunos efectos al pasar el cursor usando la declaracion "hover"
como por ejemplo

 

.post-body img {

border-radius:  10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
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:100px 300px 100px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  100px 10px 10px 100px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
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:10px 100px 100px 0px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  10px 10px 10px 10px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
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:300px 300px 300px 300px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

  

.post-body img {
border-radius:  300px 300px 300px 300px; /* Borde redondeado */
box-shadow: 0px 0px 10px #000; /* Sombra */
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:10px 10px 10px 10px; /* Con esto quitamos el borde redondeado */
box-shadow: 0px 0px 15px #000; /* Sombra */
padding:15px; /* Espacio entre la imagen y el borde */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;

}

Es cuestion de jugar con en radio de los bordes para tener un estilo perzonalizado por ejemplo

border-radius: 10px 50px 15px 80px;

Cada valor corresponde a una esquina de la image, en este ejemplo seria:

10px es el borde de la esquina superior izquierda.
50px el borde de la esquina superior derecha.
15px el borde de la esquina inferior derecha.
80px el borde de la esquina inferior izquierda.


En conclusion podemos conseguir que las imágenes de las entradas se vean más atractivas, que interactúen con el lector, y tan sólo ha sido añadiendo un poco de CSS.