Poner y quitar sombras de imágenes

Como poner sombra a una imagen en blogger

Blogger por defecto suele poner en las imágenes que publicamos en los blogs una sombra y un contorno blanco alrededor de ellas. Ya explicamos en un post anterior como quitar ese efecto (ver enlace más abajo si lo que quieres es quitar las sombras)

Cómo he tenido algunos comentarios preguntando si se puede aplicar ese efecto sólo para algunas de las fotos he buscado una solución que puede que os sirva. 

¿Cómo poner sombra a algunas de las imágenes de blogger?

Si lo que quieres es que sólo algunas de las fotos que subes al blog mantengan ese efecto de sombra tienes que aplicarles un estilo css

Cómo yo tengo modificado el blog para que me salgan las imágenes por defecto sin sombra en esta imagen no he hecho nada.

Cómo poner efecto de sombra a una imagen 

Paso 1

Nota: Este paso sólo lo hacemos una vez en el blog

Copia y pega el siguientes código en Plantilla/ Personalizar/ Avanzado/ Añadir CSS

#sombraimg{

   -webkit-box-shadow: 6px 4px 5px 1px rgba(148,145,148,1);
  -moz-box-shadow: 6px 4px 5px 1px rgba(148,145,148,1);
   box-shadow: 6px 4px 5px 1px rgba(148,145,148,1);

}

Paso 2

El siguiente paso es poner  dentro de la etiqueta de cada imagen a la que queremos añadir el efectoid='sombraimg'

Nota: Este paso lo hacemos en cada imagen en la que queremos añadir una sombra

Vamos a la entrada del post donde tenemos la imagen a la que queremos añadir el efecto sombra, en el post tienes arriba un botón donde pone html, buscamos la imagen, para ello puedes usar la opción de busqueda Crtl+f y cuando salga el buscador poner img para localizar las fotos.

Una vez localizada la imagen, en mi caso la de abajo añadimos el id

<img  id='sombraimg' border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qfm1zGk0Cv7zReV4UPUmCM1wrkf4qcV3_oBty70RQ0mQ9gSMBamfz5nKIAAfgKSz29O497zXUQU7YbaMyy6PcUQ7r2QJicZWbfAf6sT5SVn3gDGtvrO5hDDXTivCTEKkEJEOd9H7bqI/s1600/foto_con_sombra.png" />

Espero que os sirva de solución. Gracias Lidia por tu ayuda :D

Happy day :)

De: http://trucos-diseno-web.euroresidentes.com/

Cómo quitar las sombras de las imágenes de blogger

Tutorial para eliminar las sombras y el borde en las fotos del blog (Blogger)

Cuando subes cualquier imagen al blog, blogger pone por defecto un contorno y una sombra en esa foto o imagen.  (ver ejemplo abajo)

Si te gusta como quedan tus fotos con el contorno y el sombreado perfecto no toques nada pero si no te gusta como queda y prefieres que la foto no tenga ese efecto puedes quitarlo de un modo muy sencillo.

1. Entra al editor de blogger y haz click en Plantilla/ Editar Html

2. Después coloca el cursor dentro de la zona editable de la plantilla y presiona la combinación crtl+f en tu teclado, aparecerá un buscador en la esquina derecha del editor

3. Copia este trozo de código: .post-body img y pégalo dentro de la caja de búsqueda, después dale a la tecla enter (o intro). Con esto lo que hacemos es localizar el código en el que vamos a cambiar los parámetros

4. Te aparecerá destacado en amarillo el código que estamos buscando, fíjate sólo en el primero que te marca que es el que hay que cambiar, el código que tenemos que localizar es el siguiente: 

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: $(image.border.small.size);

  background: $(image.background.color);

  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Lo que hay marcado en rojo es lo que tenemos que cambiar, puedes cambiar los números uno a uno o copiar y pegar el código de abajo que ya está cambiado

Tienes que poner todo los números marcados en rojo a 0 de forma que quede como el código de abajo 

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: $(image.border.small.size);

  background: $(image.background.color);

  border: 0px solid $(image.border.color);

  -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

  -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .1);

  box-shadow: 0px 0px0 rgba(0, 0, 0, .1);

Importante cuando no tienes mucha experiencia con el html

Cuidado al tocar el html de la plantilla si no estás seguro de que los has hecho correctamente puedesdeshacer (ctrl+z) y dale a vista previa antes de guardar la plantilla y los cambios.

De: http://trucos-diseno-web.euroresidentes.com/2014/06/como-quitar-las-sombras-de-las-imagenes.html