Lookeando las imágenes con CSS

Hace tiempo encontré grandiosos efectos que se pueden lograr sólo con CSS, como un efecto vintage, en Ciudad Blogger y un filtro de escala de grises, en Oloblogger. Con estos métodos como base, se pueden lograr infinitas opciones para decorar las imágenes.

Imagen de The Art of Matt Kaufenberg.

Para lograr la textura utilizamos los CSS Patterns con los cuales utilizamos un liviano trozo de base64, obtenemos grandes resultados.

Acá te muestro el CSS de los ejemplos, y luego el HTML. Recuerda que puedes experimentar cambiando los colores, probando con las texturas y agregando lo que quieras para lograr todo lo que creas posible, esto sólo es una base para que obtengas tus propios resultados.

Ejemplo 1

.clase-a-eleccion {
width: 320px;  /* Ancho de la imagen */
height: 265px;  /* Alto de la imagen */
position: relative;
float:left;
}
.clase-a-eleccion img {
padding:0;
margin:0;
width:100%;
height:100%;
}
.clase-a-eleccion:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(20, 255, 0, 0.5); /* Color de la imagen */
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkYGAwBuKzQIwNGDNCRbEpAovBFIDUISuCs5EVwBSBaLiVJCnAawVeR+L1JgBFmQxvraGi2QAAAABJRU5ErkJggg==);  /* Pattern Textura */
box-shadow: inset 0 0 50px rgba(0,0,0,.6);  /* Sombra interna */
-webkit-transition: 1s;
-o-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
}
.clase-a-eleccion:hover:before {
opacity:0;
}

Ejemplo 2

.clase-a-eleccion {
/* Filtro de escala de grises */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
position: relative;
width: 320px;  /* Ancho de la imagen */
height: 265px;  /* Alto de la imagen */
float:left;
}
.clase-a-eleccion img {
padding:0;
margin:0;
width:100%;
height:100%;
}
.clase-a-eleccion:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(20, 255, 0, 0.5);  /* Color de la imagen */
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAM0lEQVQYV2NkYGAwBuKzQIwVMEJFcSqCKQCpw6oIWQFWRegKMBRhU4CiCJcCuCJ8CsCKAAKvBzyV2TSbAAAAAElFTkSuQmCC);  /* Pattern Textura */
box-shadow:inset 0 0 50px rgba(0,0,0,.6);  /* Sombra interna */
-webkit-transition: 1s;
-o-transition: 1s;

-moz-transition: 1s;
-ms-transition: 1s;

}
.clase-a-eleccion:hover:before {
opacity:0;
}
.clase-a-eleccion:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}

HTML

<div class='clase-a-eleccion'>
<img src='URL-de-imagen'/>
</div>

Recuerda que puedes cambiar la clase de la imagen en color azul en el HTML al igual que en el CSS.

Por cierto, si no entiendes bien el generador de Patters antes mencionado, aquí tienes una entrada en Compartidísimo para comprenderlo, pero de todas formas no es tan difícil.

¡Me gustaría empezar a ver sitios con imágenes retocadas completamente con CSS los próximos días! :D  Saludos.