Im?genes estilo vintage en el blog, s?lo con CSS

Instagram ha hecho que muchos tomen el gusto por las fotos estilo vintage, as? que es muy com?n ver por todas partes este tipo de fotos que dan un aspecto de ser algo viejas.

Si no quieres usar un programa para tener tus fotos tipo vintage, puedes usar CSS y obtener un resultado similar. En s? lo que haremos ser? aplicarle una sombra difuminada al interior de la imagen, le a?adiremos un borde, le pondremos un color encima (que ser? la que le dar? ese efecto tipo Instagram), y encima de la imagen otra imagen semitransparente estilo grunge que le dar? el toque viejo.

Puedes ver el ejemplo en esta imagen de abajo, al pasar el cursor cambia a su estado normal aunque conserva el borde.

Obviamente habr? im?genes a las que les quede mejor este tipo de efectos que a otras, pero independientemente de eso s? hay que hacer dos observaciones:

1. Est? hecho con estilos CSS as? que como ya sabemos habr? navegadores que no los reconocer?, espec?ficamente Internet Explorer, as? que en ese navegador no se ver? ning?n efecto.
2. Las im?genes no estar?n centradas, podr?s alinearlas a la izquierda (por defecto), o a la derecha.

Habiendo aclarado lo anterior empecemos. Lo primero es entrar en la Edici?n de HTML y pegar antes de ]]></b:skin> los estilos:

/* Im?genes Vintage
----------------------------------------------- */
.vintage img {
padding:0;
float:left;
}
.vintage {
border:10px solid #000;
border-radius: 10px;
position: relative;
float: left; /* Cambiar por right si quieres que las im?genes se alineen a la derecha */
margin-right: 20px;
margin-bottom: 20px;
}
.vintage:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255,0,0, 0.5); /* rojo */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_hTpwevLs7dQnDGvTG7mVWQFjozI6QkINLrNp_muAs4jn164mVixxvhBDsZm8ObO-3wlbQK9VEqKF3JBSoAqJehmSd8sC97ky-iy4ZJu-Q_JqX6sGO8ZbB3ATRCDq37QE6Wlb9fENOeI/s0/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px rgba(0,0,0, 0.5), inset 0 0 50px rgba(0,0,0, 0.5), inset 0 0 50px rgba(0,0,0, 0.5);
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
}

Por ?ltimo usa este c?digo en tus entradas o donde quieras mostrar la imagen:

<div class="vintage">
<img border="0" src="URL de la imagen" /></div>
<div style="clear: both;"/>

Agrega la URL de la imagen donde se indica y listo.
Si quisieras que el texto de la entrada rodee la imagen entonces elimina la etiqueta en color azul.
En el primer c?digo ver?s en negrita la l?nea que corresponde al color de la imagen, puedes modificarla por alg?n otro color, estos son algunos ejemplos de lo tradicional en vintage:

background-color: rgba(0,0,255, 0.5); /* azul */
background-color: rgba(0,255,255, 0.5); /* aqua */
background-color: rgba(0,255,0, 0.5); /* verde */
background-color: rgba(255,0,240, 0.5); /* violeta */
background-color: rgba(255,102,0, 0.6); /* sepia */
background-color: rgba(0,0,0, 0.6); /* colores m?s oscuros */

Si quisieras que la imagen permanezca siempre as? sin que regrese a su estado original al pasar el cursor entonces elimina esta perte del primer c?digo:

.vintage:hover:before {
background: none;
box-shadow:none;
}

Y eso es todo, con este peque?o experimento podr?s tener tus im?genes al estilo vintage usando s?lo CSS.