Imagen Estilo "Vintage" 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 unas observaciones:
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.
Al pasar el cursor por la imagen cambia con un efecto de transición, pero éste sólo se ve en Firefox.
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;
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/AVvXsEhAGiVrY7TNX85jvBX2ghzWD6kCK2a6LDgo37xq5PUu8ueYp8XLTH6eANRC1ZSogFKd7kCg_RhJh4oNdPQtwwiTQwFPecFypuNQRuZ0-dAKwhpmyRk3X3yN4Zlt7tEZyBmjGcnd8Rf-Vl4/s0/grunge.png);
background-size: cover;
box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}
.vintage:hover:before {
background: none;
box-shadow:none;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}


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;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all .1s;
}

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

Gracias a Potro por compartirlo

Posted in: Blogger, CSS