Tutoriales Blogger: Efectos en imágenes


Bonito Martes, ¿Como estan? Hoy les traigo un nuevo tutorial de como agregar efecto a sus imágenes! espero les guste y les siva! Solamente les recuerdo que la mayoria de los efectos que les enseñare a poner en su blog se activan al pasar el cursor sobre él y les enseñaré algunos truquitos donde permitirán que el efecto permanezca:

Hay dos opciones de como poner los siguientes códigos que les daré para darle un lindo efecto a sus imágenes el primero seria ir a TEMAPersonalizarOpciones avanzadas Agregar CSS y ya estando en CSS agregamos los códigos que les pongo abajo, dependiendo del efecto que deseen en sus imágenes:


Y agregamos el código y ya está!

La segunda opcion seria que es ir a TEMA EDITAR HTML de nuestro blog Y buscamos esto: ]]></b:skin>

Muchas veces nos aparecera esto, solamente tienen que dar clic en lo azul y se despegara con ctrl+ f buscarán el elemento y arriba de él agregaran el efecto que deseen y le dan guardar y actualizan su blog para ver si salio bien el efecto que escogieron


Y estos son los efectos que podrán usar:


Efecto oscurecer:
Este efecto la imagen se oscurece al pasar el cursor sobre él:


.post img { -webkit-transition: all 0.8s linear;-moz-transition: all 0.8s linear;transition: all 0.8s linear }.post img:hover { -webkit-filter: grayscale(100%);z-index: -99px; }


Pero si quieres que el efecto en las imágenes permanezca oscura solamente agregarás:

.post img { -webkit-filter: grayscale(100%);z-index: -99px;  }

Efecto desenfoque: 
Este efecto al pasar el cursor sobre la imagen está tendrá un efecto desenfoque, pruebalo, te agradará!


.post img { -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear }.post img:hover { -webkit-filter: blur(1px);z-index: -99px; }

Efecto Arcoiris: 
Con este efecto tus imágenes tendrán un lindo efecto de varios colores, si es que te gusta que tus imágenes tengan un lindo despliegue de colores.


.post img { filter: hue-rotate(360deg); -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -webkit-filter;(1); -webkit-transition: all 0.7s linear; -moz-transition: all 0.7s linear;
transition: all 0.7s linear; }
.post img:hover { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); -moz-filter: hue-rotate(0deg); -webkit-filter;(0); }
Efecto oscuridad:
Igual que los anteriores este efecto al pasar el cursor se oscurece....


.post img { -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear }
.post img:hover { -webkit-filter: invert(100%);z-index: -99px; }

Efecto Sepia:
¿Te gusta el efecto sepia? este código será tu mejor amigo


 .post img { -webkit-transition: all .7s linear; -moz-transition: all .7s linear; transition: all .7s linear }.post img:hover { -webkit-filter: sepia(100%);z-index: -99px; }
Si se te hace que la imagen esta muy amarilla y quieres algo más tenue pueden bajar el número, entre menor sea el porcentaje del color este será más tenue, dependiendo, claro, de como les guste sus imágenes.
Efecto Rotación:
Este efecto al pasar el cursor en la imagen esta se voltea y tendra un color más tenue en escalas de grises! un lindo efecto que querrás es tus imagenes!

.post img:hover { -webkit-filter: grayscale(0.7); -webkit-transform: rotateY(-180deg);-moz-transition-duration:1s; -webkit-transition-duration:1s; -o-transition-duration:1s; }

Les gusto el tutorial? no se les olvide compartir la entrada para que más personas puedan poner lindo su blog! y comentar que efecto les gusto y (mostrarme) cual usaron en sus blogs!  no se olviden seguirnos en nstras redes sociales

No hay comentarios.:

Publicar un comentario