Añadir Sombra a Imagenes y Expandirlas en Blogger

CSS es muy divertido para manipularlo y crear efectos especiales especialmente en tu blog de blogger.con el desarrollo creciente de la hoja de estilo cascada o CSS y la aceptacion de los mayores navaegadores de la internet,el diseno de la red se ha convertido mas y mas creativo.


Recuerdo que usabamos Photoshop manualmente para anadir sombra a las imagenes pero ahora gracias a CSS3  puedes anadir sombra a todas las imagenes automaticamente. Aprenderemos hoy como minimizar el tamano de las imagenes grandes y como hacer que estas se expandan a su tamano original al poner el mouse sobre las mismas.Estoy seguro que te gustara.


Ejemplo de este efecto:

Como Añadir Sombra y Alargar Imagenes al Pasae el Mouse sobre las mismas?

El Metodo es uno simple.

1. Entra en Blogger > Plantilla > Editar HTML
2. Haga Copia de tu Plantilla
3. Busca la siguiente etiqueta ]]></b:skin>
4. Arriba de esta etiqueta ]]></b:skin> pegue el siguiente codigo

.MBT-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.MBT-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

Nota: Si deseato desminuir el tamano de la imagen aun mas ,entonces bajele un 0.7 y si desea desaparecer la foto aun mas bajele un 0.5


Ya estamos casi listos. Ahora cuando desee aplicarle a una imagen este efecto , simplemente use el siguiente codigo.,

<div class="MBT-CSS3">
<img src="La Url de la Imagen Va Aqui" />
</div>

Suba una imagen al Editor de Blogger y reemplace La Url de la Imagen Va Aqui con el enlace de la imagen.Listo. Ahora visita tu blog para ver el efecto en accion.
Si desea anadir este efecto a otra imagen siga anadiendo <img src="La Url de la Imagen Va Aqui " /> antes de </div>
Este efecto es compatible con las ultimas versiones de Mozilla, Safari, Opera, Chrome y como de costumbre no tan efectiva con IE.Espero te guste..

Read More