07 novembro 2012

{Atualizado 1x} Efeito CSS3 - Moving

http://static.tumblr.com/sxeyvs3/KpHmd4f2z/sel.png

Olá candies, trouxe outro efeito css para vocês, são quatro formas diferentes, são muito úteis, vocês podem usar como blogs destaques :)
Visualize os resultados aqui.



Tutorial - Primeiro Efeito 

#upp {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/h6ymd2ydy/3.png) no-repeat bottom;
width: 200px;
height: 100px;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#upp:hover {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/h6ymd2ydy/3.png) no-repeat;
width: 200px;
height: 120px;

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

Mude o que está marcado, a imagem que usei é esta abaixo :
http://static.tumblr.com/sxeyvs3/h6ymd2ydy/3.png
Edite Como Quiser


Para usa-lo:

<a href="Link" id="upp"></a><br>

Depois postarei os outros efeitos para não ficar aquele big post :)

Atualização 1x

Tutorial - Segundo Efeito
#dow {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/PkFmd2y6f/1.png) no-repeat;
width: 200px;
height: 100px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#dow:hover {
display: block;
background: url(http://static.tumblr.com/sxeyvs3/PkFmd2y6f/1.png) no-repeat;
width: 200px;
height: 120px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
 Mude o que está marcado, a imagem que usei é esta abaixo :


http://static.tumblr.com/sxeyvs3/PkFmd2y6f/1.png

Para usa-lo:
<a href="Link" id="dow"></a><br>

14 comentários:

  1. Gosteei do post e do efeitoo!!
    Seguindoo amr!! ~* seeg de volta aeew
    rascunhosdecaneta.blogspot.com
    Posta um comentt dizendo que tah seguindõo
    Adoreei o layout ^^

    ResponderExcluir
  2. O efeito dos "elas gostam" do kawaii world!
    Amei o tuto!

    Bjs, bjs ;*
    jaguarsedictions.blogspot.com

    ResponderExcluir
  3. Muito lindo os efeitos.

    overdosedeloucura.blogspot.com

    ResponderExcluir
  4. Nossa amei muito aqui. Alem de ser um lugar muito lindo é super útil para todos.
    Esse tudotual concerteza vou usar, até já sei aonde *-*
    Aceita afiliação?
    Beijos
    http://crazy-html.blogspot.com.br

    ResponderExcluir
  5. Dooh, desculpa não aparecer mais, estou desligada da blogosféra por um tempo, entra no msn, pra gnt conversar, preciso falar um negócio, baay!!
    delicada-official.blogspot.com

    ResponderExcluir
  6. Amei o blog, muito lindo!

    amantesdemoda.blogspot.com.br

    ResponderExcluir
  7. Oi, gostei muito do seu Blog!! Estou seguindo, adoraria se você também seguisse o meu! Obrigadeiro!!

    Peall, do Big Brigadeiro!!
    www.bigbrigadeiro.blogspot.com.br

    ResponderExcluir
  8. Não se preocupe o codigo dakle blockquote e super facil de fazer ;D
    Esperando atualizações aki!

    Bjs, bjs ;*
    jaguarsedictions.blogspot.com

    ResponderExcluir
  9. Eu amei esses estilos, são perfeitos! Sempre necessários e ótimos para uma legenda ou coisa do tipo. Eu amei o seu blog. Super ajuda algumas pessoas, além de ser mega fofo, bonito...com esse layout perfeito né? Arrasou ;]
    Nhaaac :3 | viciadasemcupcake.blogspot.com.br

    ResponderExcluir
  10. O resultado fica lindo, amei!

    rabisqueamesa(.blogspot.com.br)

    ResponderExcluir
  11. Lindo o blog! Ameei o post.

    Retribui? ^^ www.meninadealegria.blogspot.com

    ResponderExcluir
  12. O efeito fica lindo! Principalmente o "pra baixo"

    chovendodiamantes.blogspot.com

    ResponderExcluir
  13. Adorei os efeitos
    teen-girl-fashion (.blogspot.com)

    ResponderExcluir
  14. Olá! Aceita afiliação? Espero que sim, já sigo o seu blog. Retribui?
    my-crazy-world-by-luh.blogspot.com

    ResponderExcluir

Comente que eu retribuo!