Como añadir un Drop Shadows para imágenes y ampliarlo al momento que pase el ratón en blogger.


Como añadir un Drop Shadows para imágenes y ampliarlo al momento que pase el ratón en blogger.

CSS para uso en blogger es una forma muy divertida. Con el desarrollo de estilos de blogger podemos crear nuevas formas de diseños para nuestro blog de blogger. Hoy vamos aprender como reducir al mínimo el tamaño de las imágenes y luego al pasar el ratón por enzima de la imagen nos muestre su tamaño original. Este gran truco de blogger lo voy a compartir con ustedes.

A continuación mire su demostración 


Luego de que usted haya mirado su demostración siga las siguientes instrucciones simples para su instalación en blogger.

1 Ir a Blogger
2 Diríjase a “Plantilla
3 De un clic donde dice “Edición de HTML” y luego en “Continuar
4 Presione “F3” y busque este código ]]></b:skin>  
5 Pegue el siguiente código justo encima de ]]></b:skin>  

.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;
}


Si desea reducir aún más el tamaño de la imagen a continuación disminuir 0,7 o si usted quiere que su imagen este bastante desvanecida, solo tiene que disminuir 0,5  hasta lo que usted necesite.

6 Ahora dele un clic en “Guardar plantilla

Ya tenemos nuestro código CSS3 insertado en nuestro código HTML de blogger, ahora lo único que falta hacer es lo siguiente.

Recuerde que cada vez que necesitemos hacer este truco de efecto en nuestras publicaciones, tenemos que insertar un código en el articulo que van a publicar.

A continuación realice lo siguiente

1 Ir a Entradas
2 Abrir nueva Entrada
3 Escribe tu artículo en tu entrada y carga una imagen en tu artículo.
4 Luego da un clic en la parte superior izquierda de tu entrada donde dice “HTML”
5 Se te abrirá el código HTML de tu entrada, en el cual tienes que realizar lo siguiente
6 Copia el siguiente código enzima del código de la imagen que cargaste.

<div class="MBT-CSS3">
<img src=" El URL de la imagen va aquí " />
</div>

7 Copia la URL de la imagen que cargaste después de “src” y insértelo donde dice “El URL de la imagen va aquí”, eso es todo.

8 No te olvides de borrar el antiguo código de la imagen, por ejemplo mira las imágenes a continuación y te darás cuenta como es que tiene que quedarte paso a paso. Te recuerdo que cada imagen esta enumerada para que no te confundas.

2
4
6
  
7
  
8

8 Si quieres añadir este efecto a otra imagen solo vasta con añadir este código <img src=" El URL de la imagen va aquí " /> antes del cierre </div>.

Este efecto de imagen es compatible con los navegadores siguientes Mozilla, Safari, Opera, Chrome y no tan eficaz con el navegador Internet Explorer que es muy aburrido.

Cualquier preguntas no dude en hacérmelo saber y de inmediato le responderé.

Saludos.



Share:

Related post

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments: