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.
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 imgY 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;Y luego, pueden cambiar los valores, acá les explico para que sirve cada uno.
background: url('url de tu imagen');
opacity:.72;
filter: alpha(opacity=72);
+ 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 {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.
padding: 9px;
background: url('url de tu imagen');
opacity:.99;
filter: alpha(opacity=99);
}
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!
No me salen los códigos del principio:$
ResponderEliminarEl post-body img...? Probá buscando solamente .post-body img,
EliminarPorque puede depender de la plantilla que estas usando ;)
A mí tampoco me aparecen, ni los de arriba ni el peque que pusiste tú ahí :S
ResponderEliminarMe puedes decir como hago para redondear los bordes e la imagen? :)
ResponderEliminarEstoy igual que las demás chicas... tampoco me sale :(
ResponderEliminarA mí no me sale D:
ResponderEliminarLos códigos y eso sí, pero cuando pongo todo la imagen se queda normal... ¿me puedes ayudar? Besos
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
EliminarNo 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 ;)
Eliminarno me encuentra ningún código :(
ResponderEliminarQué plantilla usas?
Eliminarjaja ya no importa porque cambie a plantilla filigrma y ahi si pude hacerlo :D Gracias!!
ResponderEliminarOkaaaa :)
EliminarA 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 :(
ResponderEliminarhttp://batataflor.blogspot.com.ar/
Gracias.
No existe la plantilla "Windows". Bah, a mi no me sale ninguna con ese nombre. No será "Picture Window?
EliminarBueno, si te has confundido y es esta que yo te digo, te diré lo que tienes que hacer.
EliminarHe 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!
Gracias por tu ayuda, pero no hace el efecto que yo quiero que es el que esta en el post ¿que pasa?
Eliminar¿Que hago?
ResponderEliminarahahhahahah, miraaa me sirvio porque era algo mio losiento mucho gracias tu blog es genial!
ResponderEliminarAh bueno, esta bien entonces jajaj. Igual en mi blog también tiene el atributo sombra, pero nada más :/
EliminarA 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
ResponderEliminarNo, no.. debías haber hecho algo mal pero si funciona lo que explique arriba, yo lo hago así de hecho, imaginate xD
EliminarMIL GRACIAAAAAAAAAAS
ResponderEliminarTe amo, Cata, este tuto es exactamente lo que buscaba ♥ Eres mi diosa :)
ResponderEliminarY para hacer que cuando pones el mouse por encima se rendondeen los bordes de las imagenes???
ResponderEliminarEn lo que es el .post-body img:hover { tienes que agregar:
Eliminarborder-radius: 10px;
o cambias el 10 por el valor que quieres, cuanto más grande, más redondo se veran ;)
que plantilla usan?
ResponderEliminar