AÑADIR UN DROP SHADOWS PARA IMAGENES (Amliar la Imagen al momento que pase el raton)
By Blogs Famag - viernes, enero 13, 2017
AÑADIR UN DROP SHADOWS PARA IMAGENES
(Amliar la Imagen al momento que pase el raton)
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.
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;
}
-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 deseas reducir aún más el tamaño de la imagen a continuación disminuir 0,7 o si tu quieres que tu imagen este bastante desvanecida, solo tienes que disminuir 0,5 hasta lo que lo veas bien.
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.
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 copiar el codigo con la URL de la imagen puesta en el codigo HTML.
6 Copia el siguiente código enzima del código de la imagen que cargaste.
Recuerda que cada vez que necesitemos hacer este truco de efecto en nuestras publicaciones, tenemos que insertar un código en el articulo que vas a publicar.
<center><div class="MBT-CSS3">
<img src=" El URL de la imagen va aquí " />
</div></center>
<img src=" El URL de la imagen va aquí " />
</div></center>
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.
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.
Fuente; Ayudadeblogger
Fecha:13/01/2017
Publicado por:
0 comentarios