[TUTORIALES]4 Efectos para tus imagenes.

Hola~!!Como estan?Pues yo aqui que la pase muy bien en el dia de los padres,Solo lo pase con mi papa &  mi mama.{Si,Paso algo en el blog?}Bueno como ven hay nuevo diseño,y la verdad pienso que se va a quedar asi por un tiempo....Les cuento,el diseño anterior era mas como de prueba,mientras hacia este...Mi personaje escogido fue*tambores por favor*"LUHAN"de exo,{ultimamente me estoy odsesionando con ellos}Bueno mi madre queria que pusiera a kris,pero luhan se ve mas cute con estos colores{no queria cambiar el estilo de kris XD}Ademas hace tiempito queria poner estos colores...Yo espero que les guste?~!{Mas vale que si,por que me duele el cuello...}Pues estoy haciendo unos recursos,ademas ya subi todos los capitulos de "Pupa".y Pues he pensado en un proyecto...Es sobre blogger{aunque paso algo horrible con mi comic}Cuando haga la entrada todos lo sabran,Bueno hoy les traigo 4 efectos para sus imagenes,Pues vamos a empezar:


1.Efecto Black#1:

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>
-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.
img{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
transition: all .7s linear;
}
img:hover{
-webkit-transition: all .7s linear;
-moz-transition: all .7s linear;
-webkit-filter: brightness(15%);
z-index: -100px;
}
2.Efecto Circle#2:

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>
-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.
img:hover{
-webkit-animation-name: MMCa2;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');}
@-moz-keyframes MMCa2 /* Firefox*/
{
{ -ms-transform:: translate(0px, 0px) rotate(0deg); }
 50% { -moz-transform:  translate(0px, 0px) rotate(360deg); }
}
@-ms-keyframes MMCa2 /* IE9*/
{
  0% { -ms-transform: translate( 0px, 0px) rotate(0deg); }
 50% { -ms-transform: translate( 0px, 0px) rotate(360deg); }
}
@-webkit-keyframes MMCa2 /* Safari and Chrome */
{
  0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
 50% { -webkit-transform: translate(0px, 0px) rotate(360deg); }
}
</style>
-Abrimos un gadget o en alguna entrada y pegas el siguinte codigo:
 <img src="URL IMAGEN" style="height: 400px; width: 400px;border-radius:9999px;" />
</div>
3.Efecto Reflejo:

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>
-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.
img{
padding:4px;
-webkit-box-reflect: below 0px -webkit-gradient
(linear, left top, left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.1)))
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
}
img:hover{
opacity: 1;-webkit-box-reflect: below 0px
-webkit-gradient(linear, left top,
 left bottom, from(transparent),
color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
}
4.Efecto Line:

-Vamos a Plantilla | ctrl+f | buscas ]]></b:skin>
-Arriba de ]]></b:skin> pegamos el siguiente codigo & luego guardamos.
img{
background:transparent:
box-shadow:inset 0 0px 0px #FCDFFF;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
padding:5px;
border:1px solid #FE2E64;
}
img:hover{
box-shadow:inset 260px 0px 1px #FE2E64,
inset -260px 0px 1px #F9B7FF;}
Espero que les gusten todos efectos,y que le den buen uso^^
Pues eso seria todo,espero poder dejarle una entrada mas entretenida la proxima vez~!
Recuerda dejar tu comentario~
Les dejo besos de cherryT.O.P
Att:Lee rae mi{dayi}

26 comentarios:

  1. buen tutorial, gracias por el ^^

    ResponderEliminar
  2. Buen tutoo,gracias! Y amo el nuevo diseñoooo!!!
    Saludooos~

    ResponderEliminar
  3. adorei o tutorial... Agora fiquei em dúvida qual usar, são todos lindos (∩˃o˂∩)♡

    ResponderEliminar
  4. Me encanto el tutorial! Por cierto amo tu nuevo diseño *-*
    ~besos c:

    ResponderEliminar
  5. gracias por los efectos aunque alguna preview de los mismos no estaria mal :3
    en cuanto a tu nuevo diseño esta hermosoooo *-*
    tiene una onda asi como los blog en portugues, divine!
    beso. *3*

    ResponderEliminar
  6. Me ha encantado el diseño *-* tiene unos colores muy bonitos :D
    Buen tuto haber si lo meto para mi siguiente plantilla ^^

    Un abrazo.

    ResponderEliminar
  7. gracias por el tutooo~ me servirá de mucho :3
    saluditos!^^
    PD: me encantó el nuevo diseño *0*

    ResponderEliminar
  8. ¡Gracias por el tutorial! por cierto, el diseño del blog está muy bonito :D
    Saludos.

    ResponderEliminar
  9. Wooow... Hermosa tu plantilla y lindos colores.
    Me han encantado tus diseños... los aplicaré en mi próxima plantilla... Aunque creo que debo hacer algo más masculino xD

    ResponderEliminar
  10. excelente tuto tal vez lo utilice gracias y por se acaso muy lindo el blog me encanta

    ResponderEliminar
  11. Hola!
    Yo festejé el Día del padre ayer, aunque fué el domingo >.< pero es que por una y otra cosa el domingo no hubo un festejo como queríamos, y parecía cualquier cosa menos un día del que estamos alegres de vivir >.< así que lo festejamos REALMENTE ayer :3 :) Me alegro de que lo hayas pasado bien :)
    El diseño está bonito :) Si te gusta es mucho mejor :) ¿Tu madre mira tu blog? :O eso es genial e increíble :) :D
    Me gustan los efectos :) Puede que los use, aunque no sé, porque no estoy acostumbrada a ello :P es como que no es lo mío >.<
    Linda entrada
    Besos♥

    ResponderEliminar
  12. Gracias por el tutorial!!! :D Growl acaba de clavarme con Exo pero no quiero caer en otro vicio XD

    Saludos!!

    ResponderEliminar
  13. Bueno tuto :) y muy lindo el nuevo diseño x3
    Salu2 ~

    ResponderEliminar
  14. me encanta el primer efecto, esta genial

    ResponderEliminar
  15. Me encantó el último efecto!! *O* voy a realizar cambios en mi blog, o por lo menos eso quiero, asi que ese efecto de seguro que lo pongo! mil gracias!! :D por cierto, te nominé en un premio ^^
    Un saludo!

    ResponderEliminar
  16. Amo el nuevo diseño lo amo me dejas en tus amigos porfis

    ResponderEliminar
  17. wauuu hay muchos *p* muchas gracias los probare a ver que tal van
    y pos obvio si agrego alguno a mi blog los credito jejejej
    saludos

    ResponderEliminar
  18. me gustó el efecto line ^^ muy lindo :3
    y te quedó hermoso el diseño *-* también adoro a exo ^-^

    ResponderEliminar
  19. holaaa, se que no me conoces. Soy maria jose, y estoy haciendo esta encuesta para mi tesis. Sería de mucha ayuda qu pudieras contestarla n.n. Aqui está el link: www.survio.com/survey/d/Y2W9N5A3K9P4C3H2J

    ResponderEliminar
    Respuestas
    1. Hola~!
      Seria un placer,ahora paso a contestarla~!
      saludos~

      Eliminar
  20. Tu blog, es una monada! y tiene recursos es genial! te he segido! abrazos!!

    ResponderEliminar
  21. no tengo efectos en las imagenes de mi blog asi que me vendrán muy bien estos efectos gracias por el tutorial <3

    ResponderEliminar
  22. el efecto line me encanto, muchas gracias, lo usaré! *----*

    ResponderEliminar

Puedes dejar cualquier tipo de comentario(*≧m≦*)Pero si el comentario no es de gusto del blog sera borrado..
No insultes.
No spam(;¬_¬)
Si tienes algo que decirme privado:
dayi123466@gmail.com