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.
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
2 comentarios: