Efecto de sombra en las imágenes del blog con CSS

En esta entrada que les voy a mostrar hoy aprenderemos un truco muy sencillo, corto y fácil de implementar con el cual obtendremos un efecto de sombra muy bonita en las imagenes del blog que puede instalarse en unos pocos minutos.
se los voy a brindar de dos modos uno para todas las imagenes del blog y la otra para una imagen en particular.efecto parecido en el texto se puede obtener también con css

A continuación les muestro un ejemplo la sombra se las boy a poner de color blanca pero ustedes se la cambian de acuerdo al color de sus sitios.









 Para intalarlo simplemente nos dirigimos a :

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


Una ves allí buscamos la etiqueta ]]></b:skin> y añaden el siguinete codígo justo antes , para una busqueda mas rapida usen Ctrl+F y coloquen lo que quieren buscar.

Para todas las imagenes del blog.

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


 Una ves puesto en su lugar guardamos y es todo sus imagenes ahora tienen una sombra.

Si lo que desean es añadir sombra en una imagen en particular  en lugar de hacerlo para todas , buscan la etiqueta ]]></b:skin>  los mismos pasos a buscar de la de arriba y agregan el siguiente codígo.

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

 Una ves puesto en su lugar guardamos.
Ahora nos dirigimos a cualquier entrada o un gadget y usamos el siguiente codigo

<div class="TTsombra"> <img src="AQUI LA URL DE LA IMAGEN" /></div>

Reemplaza AQUI LA URL DE LA IMAGEN por la dirección de tu imagen y listo.


Lo que esta de color rojo las ffffff son el color blanco lo cambian dependiendo del color del blog o a gusto de cada cual .
Lo que esta de color amarillo es el ID unico lo pueden cambiar por el que quieran siempre y cuando no se repita en el blog.


Votar esta anotación en Bitácoras.com
Compartir esta entrada :



data:newerPageTitle data:olderPageTitle data:homeMsg
:) :( ;) :D ;;-) :-/ :-O X( B-) #:-S :(( :)) =)) ~X( :-t 8- =P~ #-o =D7 :-SS :-q :-bd

0 comentarios:

Publicar un comentario