10 de octubre de 2014

Iniciativa al Estilo Blogger: Efectos para las imágenes de tu blog! (1) [Tutorial]


Hiii chic@s! :D Pooor fiin es viernes *w* esta semana no eh podido publicar mucho D: pero bueno, ya viene el fin de semana y intentare publicar cositas *w* jajajaa
Bueno, hoy os traigo la entrada que me toca de la iniciativa "Iniciativa al Estilo Blogger"! Para las que no lo conozcan; en esta iniciativa se sortean diversos tipos de entradas [tutos, recursos, entrevistas, reseñas, etc.] y la que toque pues se publica! Así cada semana podemos publicar al menos una cosa en nuestro blog :D Me encanto la idea así que aquí os traigo la primera entrada... Esta semana ha tocado un Tutorial! Así que aquí lo tienen....


¡EFECTOS PARA LAS IMÁGENES DE TU BLOG!
 A continuación os dejare algunos de los efectos que más me gustan!

~Efecto Rainbow~
Al pasar el cursor por encima de cualquier foto de blog, la imagen cambiara de colores
durante unos segundos y luego volverá a su color original!
Para ponerlo en tu blog debes ir a...
Plantilla > Editar HTML > Y busca [Ctrl + F] este código:
]]></b:skin>

Una vez lo tengas, pega este código justo encima
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;}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);}


~Redondear las imágenes de tu blog [Efecto1]~
Para redondear como en la imagen de arriba ↑↑ todas las imágenes de tu blog debes ir a
Plantilla > Editar HTML > Y busca [Ctrl + Feste código:
]]></b:skin>

Una vez lo tengas, pega este código justo encima
img {
padding:0px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
img:hover {
padding:0px;
border-radius:0px;
}

~Redondear las imágenes de tu blog [Efecto2]~
↑↑Para poner este efecto en las imágenes de tu blog ↑↑
Para rondondear como en la imagen de arriba todas las imágenes de tu blog debes ir a
Plantilla > Editar HTML > Y busca [Ctrl + Feste código:
]]></b:skin>

Una vez lo tengas, pega este código justo encima
img {
padding:0px;
-webkit-border-radius: 50px 10px 50px 10px;
-moz-border-radius: 50px 10px 50px 10px;
border-radius: 50px 10px 50px 10px;
}
img:hover {
padding:0px;
border-radius:0px;
}

Y entonces, al darle a Guardar, podrás ver el efecto en tu blog.

Os gusto~? :D Espero que si ^^
Aquí os dejo los créditos: X & X

Bye bye

24 comentarios:

  1. te he nominado para un tag aqui!

    http://makeittotheotakustyle.blogspot.com.es/2014/10/tag-yo-friki-no-solo-que-soy-distint.html
    besoos! ^^

    ResponderEliminar
  2. Esperaba Algo asii!!! Gracias Kya ♥xD

    ResponderEliminar
    Respuestas
    1. jajajajajaja♥
      Gracias a ti por comentar Dina :'3

      Eliminar
  3. Arigato ^w^,etto,te quería invitar a una iniciativa que hice en mi blog: Inu y Neko:3,besos ^3^

    ResponderEliminar
  4. Ohayo!! :D

    LOL me mola!!! muxa grax loquilla

    ResponderEliminar
  5. Kawaii ^^, buen tuto ^^
    gracias ^^
    saludos n.n

    ResponderEliminar
  6. Me encanta el efecto rainbow *-* Antes tenía uno que se ponía los colores más llamativos o algo así, pero ya no tengo nada :3 Cuando me ponga editar el blog (o sea, cuando la flojera se me pase y el tiempo me acompañe) a lo mejor me paso por aquí a buscar el tutorial c: ¡Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Y a mi! Yo como en mi blog publico muchísimas imágenes y tal, no me gusto la idea de que con todas las imágenes que hay todas se pongan de colores al pasar ajajjajajaa me estrellara xD
      Gracias por comentar♥

      Eliminar
  7. Hola, hace unos meses desapareci de blogger por un problemita y perdi mis visitas , recuerdo que nosotras hablabamos asi que ¿Te pasarias por mi blog y me darias una idea de que puedo publicar? Saludos, es http://kawaieditions.blogspot.com/ perdon por hacer spam.

    ResponderEliminar
  8. muy buenos tutos me gusto sobre todo el primero

    ResponderEliminar