El truco consiste en solapar sobre la imagen una caja con una imagen de fondo parcialmente transparente creada al efecto, añadirle un color también semitransparente que le quite todo el contraste a la original y de forma adicional, insertarle unas sombras oscuras en los bordes.
Para ello creamos una clase que en este ejemplo hemos llamado .antiguo y con un :after le añadimos esa imagen sucia antes comentada. Yo usé una concreta pero evidentemente podéis usar la textura que os parezca oportuno, recomendando desde aquí el formato png con transparencia.
El resultado es este y después pongo el código con el que lo hice. He añadido un hover que "limpia" la imagen para que podáis notar la diferencia con respecto a la fotografía original:
No me digáis que no parece una postal antigua o un cromo viejo de esos de Vida y Color. Bien, pues sólo hace falta añadir este CSS a vuestra hoja de estilo y luego añadir la clase antiguo a cualquier imagen:
.antiguo {
position:relative;
display:table; /* Para centrado de imagen */
margin: 0 auto;
}
/* Sólo para Blogger que mete cosas raras al subir imágenes */
.antiguo a {
margin:0 auto !important;
}
.antiguo a:after {
content:"";
position: absolute;
top: 0;
left:0;
display:block;
width:100%; /* La caja solapada ocupará todo el ancho y alto*/
height: 100%;
/* A continuación la imagen que le da el aspecto antiguo y un color semitransparente */
background: rgba(162,148,85,.5) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTiNO25TkeUY3Hqc2kth8kveWARpBINRSjB1my_DpNXpwHeVuYaiouGCI9r320CLbkWZD9OY6pFxRTO7cNKSH5Jv0tmync2Ute_usz21Rjmg8j_epHr7dlfmjWF4K1SZUz1TH45sTKB4w/s1600/textura.png") no-repeat center center;
/* Independientemente de su tamaño, el fondo se extiende ocupando toda la caja */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Para teminar, unas sombritas oscuras */
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}
position:relative;
display:table; /* Para centrado de imagen */
margin: 0 auto;
}
/* Sólo para Blogger que mete cosas raras al subir imágenes */
.antiguo a {
margin:0 auto !important;
}
.antiguo a:after {
content:"";
position: absolute;
top: 0;
left:0;
display:block;
width:100%; /* La caja solapada ocupará todo el ancho y alto*/
height: 100%;
/* A continuación la imagen que le da el aspecto antiguo y un color semitransparente */
background: rgba(162,148,85,.5) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTiNO25TkeUY3Hqc2kth8kveWARpBINRSjB1my_DpNXpwHeVuYaiouGCI9r320CLbkWZD9OY6pFxRTO7cNKSH5Jv0tmync2Ute_usz21Rjmg8j_epHr7dlfmjWF4K1SZUz1TH45sTKB4w/s1600/textura.png") no-repeat center center;
/* Independientemente de su tamaño, el fondo se extiende ocupando toda la caja */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* Para teminar, unas sombritas oscuras */
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}
El centrado, las sombras, el color rgba y la imagen solapada (textura.png), los podéis alterar al gusto. Una vez el CSS esté ajustado a vuestra conveniencia sólo es cuestión de meter la imagen en un div con clase antiguo:
<div class="antiguo">
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
<a href="URL_ENLACE"><img src="URL_IMAGEN" /></a>
</div>
Lo anterior sirve para modificar una imagen en concreto, pero si queremos que todas las del blog luzcan igual y teniendo en cuenta que Blogger nos inserta automáticamente una clase llamada separator cuando subimos una imagen desde el editor de entradas, pues podemos añadir este otro código que además incluye en su última estrofa el revelado de la imagen original al pasar el puntero por encima. Si no queréis que se puedan cambiar simplemente eliminad esa última declaración:
.separator a {
position:relative;
display:inline-block;
}
.separator a:after {
content:"";
position: absolute;
top: 0;
left:0;
display:block;
width:100%;
height: 100%;
background: rgba(162,148,85,.5) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTiNO25TkeUY3Hqc2kth8kveWARpBINRSjB1my_DpNXpwHeVuYaiouGCI9r320CLbkWZD9OY6pFxRTO7cNKSH5Jv0tmync2Ute_usz21Rjmg8j_epHr7dlfmjWF4K1SZUz1TH45sTKB4w/s1600/textura.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}
.separator:hover a:after {
display:none;
}
position:relative;
display:inline-block;
}
.separator a:after {
content:"";
position: absolute;
top: 0;
left:0;
display:block;
width:100%;
height: 100%;
background: rgba(162,148,85,.5) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTiNO25TkeUY3Hqc2kth8kveWARpBINRSjB1my_DpNXpwHeVuYaiouGCI9r320CLbkWZD9OY6pFxRTO7cNKSH5Jv0tmync2Ute_usz21Rjmg8j_epHr7dlfmjWF4K1SZUz1TH45sTKB4w/s1600/textura.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: inset 0 0 80px #333;
-moz-box-shadow: inset 0 0 80px #333;
-o-box-shadow: inset 0 0 80px #333;
box-shadow: inset 0 0 80px #333;
}
.separator:hover a:after {
display:none;
}
En otra ocasión -no muy lejana- veremos cómo hacer algo parecido pero sólo con tintes de color.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Impresionado me quedo.
ResponderEliminarPues, qué quieres que te diga, a mí el efecto no me gusta mucho, me parecen unas fotos más bien ensuciadas que envejecidas, y me pregunto si añadir una imagen semitransparente de 115 kb no es ralentizar la carga de modo gratuito y si no se conseguiría el mismo efecto de un modo más liviano editando la imagen concreta y subiéndola directamente ya con ese aspecto.
ResponderEliminarPerdona, ya sabes que donde hay confianza da asco, y ya no es sólo que por circunstancias te tenga un poco abandonado, sino que para una vez que me animo a entrar en la página me sale la vena sincera y no puedo evitar decirte exactemente lo que pienso, olvidando las más esenciales normas de la adulacion y las buenas costumbres.
Disculpa, amigo, y recibe a cambio un afectuosísimo saludo ;)
Interesante cuestión, Carlos, a tener siempre en cuenta excepto cuando se trata de artículos de divulgación que son eso, de divulgación y explicación.
EliminarEn estos casos prima la exposición. Las consideraciones, tanto la que objetas como otras de adaptación a producción, idoneidad de su uso según el caso, adecuación a la página de destino... corresponde a quien implemente el ejemplo.
Quien se limite a copiar y pegar el ejemplo en el pecado lleva la penitencia.
De todas formas, y ciñéndonos a la demo de Oloman puedes hacer variaciones en las propiedades backgrond:
b-size: contain/cover
b-repeat: round/scale
o incluso b-image: múltiples urls optimizadas y reducir el peso y/o peticiones.
U olvidarnos de las imágenes y los pseudoelemtos y utilizar los filtros Css (a costa del soporte de los navegadores).
Un saludo
N.B.: hey, Oloman, ¡viste! Hoy no te he puesto pegas ¡Me estoy haciendo viejo y blando! xD
Amigo Kseso, en verdad me parece que haces honor a tu Nick, pues no menos que de sesuda me cabe calificar a tu réplica o intervención. No sé si mi humilde comentario (tal vez un poco inadecuado, ciertamente, según puede deducirse de tu exhaustiva exposición) será digno merecedor de la molestia que te has tomado, pero si sirve, al menos, para aclarar a alguien algo lo doy todo por muy bien empleado.
EliminarEn cuanto a que no hayas puesto pegas a nuestro amigo Oloman, después de cómo yo me he despachado, me parece muy bien: otra cosa hubiera rayado ya en crueldad, siendo más que sensato que nosotros, sus seguidores y amigos, intentemos dosificar nuestras críticas con objeto de no ensañarnos con quien nos ha dado tanto, el cual, aunque no quiera reconocerlo, me consta tiene un alma modesta y sensible, y un exceso de rigor por nuestra parte bien pudiera poner en peligro el frágil vaso de su amor propio, pudiendo llegar a suceder que su precioso contenido se derrame y quede por los suelos. Así que, si eres de los que tienen prurito de poner pegas y hoy has sabido contenerte en atención a nuestro amigo (aunque no quieras reconocerlo), alabo tu prudencia y discreción.
Un saludo, igualmente.
Si no fuera porque en este medio la mordacidad, la ironía, el sarcasmo, la broma enmascarada y el resto de figuras que se pueden utilizar para lanzar mensajes que normalmente no quieren decir realmente lo que literalmente dicen, pueden ser fácilmente malinterpretados, os diría a ambos sólo un lacónico "Que os den...".
EliminarPero como veo que os lo estáis pasando tan bien a mi costa sólo diré que uno hace lo que buenamente puede para poner en común lo que va aprendiendo de estas cosas, siendo consciente de que todo es mejorable. Debo ser masoca porque me encanta recibir correcciones, aportaciones de mejora e incluso críticas, en el bien entendido de que después haré lo que me de la gana con ellas.
Sólo pido que los comentarios sean como los vuestros: justificados, constructivos e inteligentes ;)
La ultima te quedo mejor que las dos primeras que buen detalle de seguro en algún momento se ocupa un truco como este algo nuevo que aprendo :P
ResponderEliminarNo es que le haya quedado mejor, es porque ese efecto le vá a la imagen.
EliminarGenial efecto por cierto.
Es para usar como convenga, pudiendo modificar la imagen solapada por otra para conseguir el efecto que se quiera.
EliminarPara que sirve el 'display:table;' en este caso? Es lo mismo que 'margin: 0 auto;'
ResponderEliminarSí. Echa un vistazo a este post, apartado "Display: table; Punto y mini punto"
EliminarHola Oloman, de nuevo por aquí.
ResponderEliminar¿Esto funciona sólo con Blogger? Es que lo estoy probando con una web "normal" y el fondo (con todos los efectos incluidos) se me queda siempre por detrás de la foto...
Buen trabajo!
La primera parte es universal. El apartado "especial" para Blogger es el segundo.
EliminarNo sé, quizás haya otro CSS que te esté interfiriendo con este.