TRUCOS y
TUTORIALES
para tu blog
No, no vendemos
camisetas... aun
Camiseta Ciudad Blogger

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

17 de septiembre de 2012 | Número de comentarios57 comentarios
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:
  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. Al pasar el cursor por la imagen cambia con un efecto de transición, pero éste sólo se ve en Firefox.
  3. 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(http://lh4.googleusercontent.com/-Qva8IVtO25k/UFejhDww-zI/AAAAAAAADAY/RnlCb7JO0xs/s000/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.

57 comentarios :

  1. Hola! Darte un millón de gracias por haberte convertido en mi mentor y gurú en esto del retoque/trastoque de blogs. Siento no tener mucho que aportar en relación a esta entrada, pero en algún lugar debía dejar constancia de lo útil que es ciudadblogger (y ya de paso comprobar si siguiendo tus pasos los comentarios enlazan directamente con mi blog y no con el perfil, como pretendía :))
    Otra vez GRACIAS. Un abrazo Potro

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu amable comentario Ariadna. Si el comentario lo haces con tu cuenta de Blogger entonces siempre se enlazará tu perfil, únicamente puedes hacer que se enlace tu blog (u otra dirección) si usas la opción "Nombre/URL" pero no todos los blogs habilitan esa opción.

      ¡Otro abrazo para ti!

      Eliminar
    2. increible es cierto funciono y sin mucho esfuerzo muchas crasias esta que solucion mas veridica.

      Eliminar
  2. Muy bonito el efecto Potro lo Probare con mi blog frases...
    POSDATA: Soy el primer comentario... :)

    ResponderEliminar
    Respuestas
    1. No fue el primero, pero podemos hacer de cuenta que sí lo fue :)

      Eliminar
    2. Casi,pero de todos modos me encanto... :3 rifas chingon Potro...

      Eliminar
  3. Hola Potro!! Espero que hayas disfrutado bien de tus merecidas vacaciones. Un abrazo y mil gracias por tus enseñanzas.

    ResponderEliminar
    Respuestas
    1. Muy bien disfrutadas, ya quiero que haya vacaciones de nuevo :D
      Un abrazo.

      Eliminar
  4. Hola Potro.
    Interesante, ¿se podría aplicar el efecto a una entrada en concreto?.
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Claro, de hecho no se aplica a todas las imágenes del blog sino que tú eliges a cuál imagen ponérselo. Es por eso que deberás usar el segundo código cuando quieras que una imagen tenga ese aspecto.
      Saludos.

      Eliminar
  5. muy bueno potro siguiendote desde q creaste estas guias de ayudas xD soy tu fans me gustaria que isieras un tutorial de php sql para crear script

    ResponderEliminar
    Respuestas
    1. Muchas gracias Isaac aunque te lo voy a deber, PHP no es precisamente un lenguaje que domino :(
      Me parece que Emilio Cobos está más familiarizado con eso, seguro él sí puede enseñarte sobre esos temas.
      Saludos!

      Eliminar
  6. Alucinante efecto el potro! tu Blog cada vez va mas y mas lejos!

    ResponderEliminar
  7. Hola Potro,

    Necesito tu ayuda resulta que he comprado un dominio para mi blog, he seguido todos los pasos para crear un registro CNAME para mi dominio, y resulta que ahora cuando intento ponerlo en configuración básica de blogger y le doy a guardar me sale lo siguiente:


    We have not been able to verify your authority to this domain. Error 12. Please follow the settings instructions.


    En el panel de control de 1&1 que es donde lo he comprado me pone que esta activo todo y que esta en marcha para funcionar que si no funciona es un problema de blogger

    He buscado información pero no encuentro nada al respecto ¿que puedo hacer? ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Cuinera, desde el 9 se septiembre aproximadamente ha habido problemas en la configuración del dominio en Blogger, había estado inhabilitado, desde hace como tres días se ha habilitado nuevamente pero parece que los problemas continúan. Como todo parece ser un problema de Blogger habrá que esperar un poco hasta que lo resuelvan por completo, una vez que ya lo hayan arreglado no debería haber más problemas con esa área de la configuración.

      Saludos.

      Eliminar
  8. Gracias Potro, tu me has enseñado muchos trucos y los he aplicado en mis blogs, te cuento que todos mis blogs tienen un enfoque comunitario que están al servicio de los demas

    ResponderEliminar
    Respuestas
    1. Eso es bueno saberlo William. Saludos y gracias por tu visita!

      Eliminar
  9. Hola, buenos días.

    Recibe un cordial saludo.

    ¡Un truco muy atractivo!
    Espero que hayas disfrutado mucho de tus vacaciones y la hayas pasado de lo mejor ;)

    Que una lluvia de éxitos te inunde. Amablemente,
    Lluvia

    ResponderEliminar
    Respuestas
    1. Muchas gracias Lluvia, la he pasado terriblemente bien :)
      Gracias por tu visita y comentario.
      ¡Saludos!

      Eliminar
  10. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Cristian, lo primero supongo que ya lo has hecho porque al menos acá veo que esa barra queda flotante y baja con la página, a menos que ese blog sea de ejemplo, si así fuera entonces puedes hacer algo como lo de esta entrada, en los comentarios se indica cómo puede usarse en otros elementos:
      http://ciudadblogger.com/2012/06/botones-para-compartir-que-se-detienen.html

      Para lo otro depende de la plantilla, podría ser sólo que ese enlace de comentarios está en una condicional para que sólo se muestre en las entradas, si así fuera sería cuestión de quitarle su condicional:
      http://ciudadblogger.com/2010/03/condicionales-de-blogger.html

      Pd. He tenido que eliminar el comentario por el aviso que está al final de la página.

      Eliminar
  11. Potro mi pregunta no tiene nada que ver con este tema oja me puedas ayudar, mi problema es que mis entradas de mi blog llegaban a mi face con twitterfeed pero ahora ya tienen un dia que no llegan sera por que le cambie la contraseña al faceook o no tiene nada que ver eso.

    ResponderEliminar
    Respuestas
    1. No creo que tenga que ver, quizá es un fallo de la aplicación. Los feeds no se entregan siempre tan rápido, algunas veces tardan y cuando se usa una aplicación externa mucho más. De cualquier forma busca en el sitio de twitterfeed por si hubiera noticias de algo, tal vez con desinstalarla e instalarla de nuevo se componga.

      Eliminar
  12. Potro no sabia donde ponerte esta pregunta porque no tiene nada que ver a la entrada actual. Mi problemita es el siguiente. En una entrada yo la edite y puse otra, pero cuando presiono para verla, arriba en las URLs aparece la direccion osea la URL de la Entrada anterior y nesecito que aparesca la URL nueva :\

    ResponderEliminar
    Respuestas
    1. La URL no cambia nunca Exequiel, una vez que la entrada ha sido publicada tendrá la misma URL siempre.

      Eliminar
  13. Gracia por el truco, me encanta el efecto, lo probare esta misma tarde en mi siguiente post.

    ResponderEliminar
  14. Hola Potro de nuevo. Una preguntilla. ¿Hay alguna manera de centrar la foto, he visto que pones derecha ó izquierda. pero ¿en el centro?.
    Lo he intentado con center al poner la foto pero el efecto se pierde. Alguna idea?

    Mil gracias

    ResponderEliminar
    Respuestas
    1. No MARDANI, eso se menciona en la entrada. Lo que sí podrías hacer es agregar un margen izquierdo a la imagen para que se mueva hacia el centro.
      Por ejemplo:
      <div class="vintage">
      <img border="0" src="URL de la imagen" style="margin-left:50px;" /></div>
      <div style="clear: both;"/>

      Eliminar
    2. Muxisimas gracias Potro. Es verdad que lo ponía (me acabo de dar cuenta jeje). Lo probare a ver que tal

      Eliminar
  15. Hola Potro buenisima pagina!! n_n tengo un problemita paresido a MARDANI pero en mi caso cuando centro la imagen los bordes sobresalen de la imagen, aca le saque una foto para que veas "MIRA" desde ya gracias por tu ayuda nos vemos :p

    ResponderEliminar
    Respuestas
    1. Hola YmomY. Necesitaría ver la entrada donde lo has colocado.

      Eliminar
  16. Gracias por la ayuda Potro Aqui esta la entrada
    y te voy agradeciendo desde ya tu ayuda n_n Aqui una foto con el codigo HTML

    ResponderEliminar
    Respuestas
    1. Recuerda lo que dice el punto 3 de la entrada:
      "Las imágenes no estarán centradas, podrás alinearlas a la izquierda (por defecto), o a la derecha."

      Así que si quitas la flotación no se verá bien. NO se pueden centrar con este método, es o a la izquierda o a la derecha.

      Eliminar
    2. Tienes razon :p disculpa, ya vere que hago en el futuro con este lindo efecto

      Eliminar
  17. hola potro me gusta tus tutos es por eso q mi blog anda en popa XD
    PERO TENGO UN PROBLEMILLA como elimino el espacio entre imagenes
    mira esta imagen
    http://i.imgur.com/U3wga.png
    yo lo redacto sin espacio pero al publicarlo le pone espacio como ago para eliminarlo
    http://i.imgur.com/A308o.png
    mi blog club-dhayzone.puntonet

    ResponderEliminar
    Respuestas
    1. Hola Eddy, desde la pestaña HTML elimina los márgenes que tenga el código de la imagen.
      Saludos.

      Eliminar
    2. Hola Potro! te cuento que ya me volvi loco, tengo el mismo inconveniente que Eddy Lopez.

      En el editos las imagenes aparecen juntas sin espacio entre ellas.

      Cuando actualizas y guardas el cambio, en la entrada aparece un espacio entre cada imagen.

      Hice lo que le indicastes a EDDY elimine todos los MARGIN. No hay caso. El problema persiste.

      Eliminar
    3. Deja sólo el código básico de la imagen:
      <img src="URL de la imagen" />

      Eliminar
    4. Sigue quedando igual que antes potro 1 mm y medio de distancia entre imagen e imagen. En el editor aparece bien, pero fuera del editor aparece ese espacio.

      Eliminar
    5. Un detalle, si edito la plantilla y coloco el siguiente codigo antes de ]]>, el espacio se reduce a 1 mm y medio, de manera contraria hay un espacio de 7mm entre imagen e imagen:

      .post img {
      margin:0px; padding:0px;
      }

      Eliminar
    6. Déjalo así entonces con ese código para que las imágenes estén forzadas a no tener ni margin ni padding.

      Eliminar
    7. lo eh dejado asi ya que reduce mucho el espacio entre imagenes. Pero no logro resolver el quitar ese espacio de 1mm y medio entre imagenes.

      Eliminar
    8. ¿Me puedes mostrar una entrada donde tengas esa separación?

      Eliminar
  18. Hola, quería hacerte una pregunta, soy novata en esto, tengo una plantilla de blogger y queria saber cómo puedo poner una imagen fija en el blog en la barra lateral. Solo puedo hacerlo con plantilla dinámica, la mia es la sencilla. Gracias

    ResponderEliminar
    Respuestas
    1. Hola leerotica, mira esta entrada:
      http://ciudadblogger.com/2009/03/poner-imagen-estatica-en-el-blog.html

      Eliminar
  19. Hola Potro!! Feliz año nuevo!!!
    Estoy buscando un efecto parecido a este, lo que quiero hacer con CSS es poner imágenes en escala de grises, y que queden de ese color siempre, que no sea solo al pasar el mouse por arriba o algo así. Y sin tener que editar las imágenes. Gracias

    ResponderEliminar
    Respuestas
    1. Sólo con CSS no creo que se pueda Lucas. Con CSS puedes ponerlos a escala a grises al pasar el cursor, pero una vez que quites el cursor regresarían a su estado normal.

      Eliminar
  20. Hola,Potro:
    Ya te hice ésta pregunta por ahí pero no la encuentro, ahora. Puse como vos me dijiste "Mostar mas" y todo éso, pero no hay caso.
    En resúmen la pregunta es: Si yo quiero que la gente que me visita en el blog, me mande sus fotos personales para publicarlas en ése lugar. ¿Cómo hago? ¿Adónde me las tienen que enviar?
    Gracias, Potro! ¡Un abrazo!

    ResponderEliminar
    Respuestas
    1. La respuesta de esa entrada está en el comentario #257.1
      Saludos.

      Eliminar
  21. Hola potro pasaba por aqui y me gusto el diseño.. tenia una pregunta, a esa imagen se le puede poner enlace? quedaría así
    --
    <div class="vintage">
    <a href="#">
    <img border="0" src="URL de la imagen" /></a></div>
    <div style="clear: both;"/></div>
    --
    El problema que al pasar el maus no se nota el efecto, que faltaria?
    De antemano gracias por la respuesta, Excelente Blog!

    ResponderEliminar
    Respuestas
    1. Hola Edwin, si quieres que tenga enlace ponlo así:

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

      Eliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
¿Te gusta Ciudad Blogger?