FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Efectos en las imágenes de tus entradas

27 feb 2012
Bueno he decidido hacer este tutorial porque varias personas me han preguntado cómo le hago los efectos de opacidad y del borde a mis imágenes.


 La verdad es que le da un aspecto muy bonito a las imágenes y es bastante sencillo, pero cualquier duda me dejan un comentario, sí? Comencemos.

1. Van a la pestaña Plantilla de su blog, y entran en la Edición HTML
2. Buscan en el código (CTRL+F para que salga el buscador) lo siguiente:
.post-body img  
Y tienen que borrar todo lo que aparece hasta el } algo así:

  padding: 5px;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

3. Cuando lo borraron, copian y pegan este otro código:
padding: 9px;
background: url('url de tu imagen');
opacity:.72;
filter: alpha(opacity=72);
Y luego, pueden cambiar los valores, acá les explico para que sirve cada uno.

+ padding es el "ancho" del borde, pueden hacerlo más grande o más pequeño, a su gusto.

+ background es el fondo:

- puede ser una imagen, en cuyo caso sólo reemplazan el url de la imagen por el link de la imagen que quieren que se vea de fondo o;

- puede ser un color; en tal caso tienen que borrar url('url de tu imagen') y reemplazarlo por el código del color que quieran, por ejemplo: background: #ff0000;

+ opacity es la opacidad de la imagen, podes subir o bajar, como gusten, pero fijense que siempre coincidan el valor de este campo y filter

4. Lo que sigue es para los efectos de cuando pasamos el mouse por encima de las imágenes. Justo debajo del código anterior, pero después del corchete } pegan lo siguente:
.post-body img:hover {
padding: 9px;
background: url('url de tu imagen');
opacity:.99;
filter: alpha(opacity=99);
}
Y bueno, los campos son lo mismo... pueden cambiarlos o dejarlos igual. No lleven la opacidad más allá de 99 porque no va a servir el efecto.

Luego guardan cambios y los efectos deberían apreciarse :) Espero que se haya entendido, que les guste y les sirva. Cualquier duda, ya saben que aquí estoy. Besos!

26 comentarios :

  1. No me salen los códigos del principio:$

    ResponderEliminar
    Respuestas
    1. El post-body img...? Probá buscando solamente .post-body img,
      Porque puede depender de la plantilla que estas usando ;)

      Eliminar
  2. A mí tampoco me aparecen, ni los de arriba ni el peque que pusiste tú ahí :S

    ResponderEliminar
  3. Me puedes decir como hago para redondear los bordes e la imagen? :)

    ResponderEliminar
  4. Estoy igual que las demás chicas... tampoco me sale :(

    ResponderEliminar
  5. A mí no me sale D:
    Los códigos y eso sí, pero cuando pongo todo la imagen se queda normal... ¿me puedes ayudar? Besos

    ResponderEliminar
    Respuestas
    1. A mi tambien,lo hago una y otra vez y siempre me sale lo mismo,se le quita la opacidad a la imagen y al pasar el raton vuelve:(Yo quiero los boprdes esos en la imagenes que tienes tu puesto

      Eliminar
    2. No debes estar poniendo el link de la imagen, el código que yo pegué ahí arriba no tiene ninguna imagen se lo tenes que poner vos, de la imagen que vos quieras ;)

      Eliminar
  6. no me encuentra ningún código :(

    ResponderEliminar
  7. jaja ya no importa porque cambie a plantilla filigrma y ahi si pude hacerlo :D Gracias!!

    ResponderEliminar
  8. A mi no me aparece ninguno de esos codigos uso esta plantilla windows este es mi blog por si te quieres fijar porfa dame otros codigos :(

    http://batataflor.blogspot.com.ar/

    Gracias.

    ResponderEliminar
    Respuestas
    1. No existe la plantilla "Windows". Bah, a mi no me sale ninguna con ese nombre. No será "Picture Window?

      Eliminar
    2. Bueno, si te has confundido y es esta que yo te digo, te diré lo que tienes que hacer.

      He mirado en esta plantilla y me he dado cuenta de que no existe ningun código para imágenes, por lo cual tienes que agregarlo.

      .post-body img {
      padding: 9px; background: url('url de tu imagen');
      opacity:.72;
      filter: alpha(opacity=72);
      {

      Y debajo este para cuando le pasas el ratón por encima.

      .post-body img:hover {
      padding: 9px;
      background: url('url de tu imagen');
      opacity:.99;
      filter: alpha(opacity=99);
      }

      Lo tienes que colocar debajo de donde pone

      /* Posts
      ----------------------------------------------- */

      Aunque buscalo (en el buscador que te sale cuando pones CTRL+F) sólo como *Posts

      Y ahí cambias los valores como explico en el resto del post :) Un beso!

      Eliminar
    3. Gracias por tu ayuda, pero no hace el efecto que yo quiero que es el que esta en el post ¿que pasa?

      Eliminar
  9. ahahhahahah, miraaa me sirvio porque era algo mio losiento mucho gracias tu blog es genial!

    ResponderEliminar
    Respuestas
    1. Ah bueno, esta bien entonces jajaj. Igual en mi blog también tiene el atributo sombra, pero nada más :/

      Eliminar
  10. A mi no me aparece :S trate con el comentario largo que pusiste y bueno que si funciono, pero uno que al pasar el cursor no pasaba nada, y otro que el color de las entradas, se va. Y tambien elimina el blockquote :S uf que enredo xD

    ResponderEliminar
    Respuestas
    1. No, no.. debías haber hecho algo mal pero si funciona lo que explique arriba, yo lo hago así de hecho, imaginate xD

      Eliminar
  11. Te amo, Cata, este tuto es exactamente lo que buscaba ♥ Eres mi diosa :)

    ResponderEliminar
  12. Y para hacer que cuando pones el mouse por encima se rendondeen los bordes de las imagenes???

    ResponderEliminar
    Respuestas
    1. En lo que es el .post-body img:hover { tienes que agregar:

      border-radius: 10px;

      o cambias el 10 por el valor que quieres, cuanto más grande, más redondo se veran ;)

      Eliminar