Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

Sombra en las imágenes de tu blog con CSS


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).

Ángeles Ibirika dice...

Gracias por el truco, Jaime. Es tan bueno como todos los que nos propones. No me pierdo ninguna de tus entradas.

Un abrazo enorme

mi blog

Jaime Trujillo Escobedo dice...

¡Pero que rápida eres, Ángeles Ibirika! Me alegró leer tu comentario. Gracias a ti por seguir El Balcón ^^.

¡Abrazotes!

Felipe dice...

Hola
Agus bosco dice:
Hola Felii
mafia de facebook dice:
como andas
Agus bosco dice:
Bien y vos
mafia de facebook dice:
bien sos agustina o tomas

Gra dice...

Hola !!!..me encantó la posibilidad de "sombrear" sólo una imagen en un post en particular!!!!
GRACIAS!!!!!

Jaime Trujillo Escobedo dice...

¡Me alegro mucho, Gra! En realidad es la mejor opción ya que podemos elegir la imagen con sombreado ;).

Abel3D dice...

Jaime un saludo, si doy click en ese botón que pasa?, automaticamente siempre me saldrán todas las imagenes con sombra? seria ideal, pero como funciona si es asi? o hay que hacer algo adicional.

Luna dice...

Hola Jaime :D queria saber si pueden ayudarme a crear una nube de eqtiquetas como la de este blog http://simpleisnaturelle.blogspot.com/, ya la e visto anteriormente en otro blog y quiero hacer una parecida, ojala y lo expliques en una entrad, gracias (:

Jaime Trujillo Escobedo dice...

Abel3D, con hacer clic en dicho botón, todas las imágenes de tu blog aparecerán con una bonita sombra ;). No hay que hacer nada adicional.

Luna dice...

Hola Jaime :D queria saber si pueden ayudarme a crear una nube de eqtiquetas como la de este blog http://simpleisnaturelle.blogspot.com/, ya la e visto anteriormente en otro blog y quiero hacer una parecida, ojala y lo expliques en una entrad, gracias (:

Jaime Trujillo Escobedo dice...

Luna, te dejo con esta entrada en la que explico como hacerlo ^^.

Jaime Trujillo Escobedo dice...

Felipe, no entendí tu comentario. ¿Qué quieres decir?

Omar dice...

esta genial thanks :P

Jaime Trujillo Escobedo dice...

Omar, me gustó el resultado en los títulos de la sidebar, así como en los de las entradas ☺.

Anónimo dice...

Y es posible quitar la sombra que viene por defecto en el gadjet imagen de las nuevas plantillas de blogger???Es que a mi por ejemplo no me gusta nada, prefiero que se vea plana...
Te estoy comentando en entradas antiguas, pero es que me vienen genial
Igual estoy rebuznando muchisimo, pero es que no tengo ni idea de esto!!!
Gracias otra vez!!
Clara

Jaime Trujillo Escobedo dice...

¡Por supuesto que es posible, Clara! Y además es bastante fácil. Necesito la dirección de tu blog para poderte ayudar mejor.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo