Añade sombra a tus imágenes del blog

¡ Artículo publicado en el blog El Balcón de Jaime, que pese a ser un blog terminado, es uno de los mejores en truvos blogger. ! Ve la entrada en su blog original.


Sombra en las imágenes de tu blog con CSS

Hace tiempo descubrimos un generador de sombras para las imágenes del blog, el cual era muy fácil de usar.

En esta entrada aprenderemos un truco aún más sencillo que puede instalarse en unos pocos segundos y nos ofrece la posibilidad de mostrar las imágenes del blog con una bonita sombra.



Podemos aplicar el truco a todas las imágenes del blog.

Y es tan sencillo como dar un solo clic en el siguiente botón:

O añadiendo unas líneas de CSS en tu plantilla:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade este bloque justo encima:

.post img, table.tr-caption-container {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla para terminar...




Si lo que deseas es añadir sombra en una imagen en particular (o varias) en lugar de hacerlo para todos los iconos del blog, busca la etiqueta ]]></b:skin> y agrega este otro bloque de CSS encima:

.blsombra img {
-moz-box-shadow:4px 4px 3px #cccccc;
-ms-filter:
"progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5)";filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=125,strength=5);-webkit-box-shadow: 4px 4px 3px #cccccc;
}

Guarda la plantilla.

Dirígete a una entrada cualquiera en la que desees aplicar la sombra.

Ahora utiliza el siguiente código para insertar la imagen personalizada:

<div class="blsombra"><img src="URL DE TU IMAGEN"/></div>

Reemplaza URL DE TU IMAGEN por la dirección de tu imagen y listo ^[+].

Notas:

- Para no estar copiando el código que aplica la sombra a una imagen en especial, haz uso de la plantilla de entrada que ofrece blogger.

- Puedes editar el color de la sombra que llevarán tus imágenes.

Sustituye en cada caso el código #cccccc por el valor hexadecimal de tu color favorito (que podrás encontrar usando la tabla de colores).