sábado, 26 de janeiro de 2013

3 efeitos legais pra você usar nas imagens do seu blog ♥

Hoooy gente ;P acabei de selecionar 3 efeitos super legais pra vocês usarem no design de seus bloguitos Mini Gifs  Será que vão gostar? - espero que sim - Dá um preview no meu blog de testes:


Se gostou de um desses clique em leia mais e aprenda como fazer, é super fácil 

O efeito Lower é tipo o efeito entrada www que eu uso aqui no blog, a diferença é que esse desce por cima. Veja: 


Pra ter esse efeito é só ir no seu HTML e colocar o código abaixo antes de ]]></b:skin> 
/*** efeito lower por htmlstrew ***/
@-webkit-keyframes lower {0% {opacity: 0;-webkit-transform: translateY(-2000px);}60% {opacity: 1;-webkit-transform: translateY(30px);}80% {-webkit-transform: translateY(-10px);}100% {-webkit-transform: translateY(0);}}
.eflow {margin-top:#px; margin-left:#px;-webkit-animation: lower 2.3s;}

E quando for usar coloque isso:
<img class="eflow" src="URLDAIMGAGEM">
Credits: 
 

Esse efeito pode ser usado na elite afiliados, na equipe do seu blog e onde mais sua imaginação permitir *--*


Pra ter esse efeito é só ir no seu HTML e colocar o código abaixo antes de ]]></b:skin>
/***** EFEITO MODERAS ******/
.imagem:hover{opacity:1.0;-webkit-transition-duration: .45s;}
.efeito img{width: 116px; -webkit-transition-duration: .45s;}
.efeito:hover img {-webkit-transition-duration: .45s; -webkit-transform: rotate(360deg); opacity: 0.20;}
.efeito img:hover {-webkit-transition-duration: .45s; opacity: 1.0;}
Você pode editar a largura da imagem se quiser, alterando o número destacado de vermelho. E quando for usar coloque isso:
 <div class="efeito">
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
<a href="LINKDESTINO"><img src="URLDAIMAGEM" class="imagem"></a>
</div>
 Credits: 

É o mais simples e você pode usar onde quiser.


Pra ter esse efeito é só ir no seu HTML e colocar o código abaixo antes de ]]></b:skin>
.pb {-webkit-transition-duration: .90s;}
.pb:hover {-webkit-transition-duration: .90s;-webkit-filter: grayscale(100%);}
E quando for usar coloque isso:
<img src="link da imagem" class="pb">
Credits: ? 

Quem quiser pedir um post ou tutorial essa é a hora, aproveitem hahah :p  
p.s E aí gostaram de algum efeito? =D

53 comentários :

  1. Sempre arrasando nos tutoriais, né Jackie?! Eu adorei e daqui a pouco vou tentar um desses efeitos. !

    >>Bonequiinha de Luxo<<
    - xoxo -

    ResponderExcluir
  2. Jackie, menina lindaaaaaaa <3
    Eu ameiiiiiii os efeitos!!! Show!!! Principalmente o efeito lower e foto preto e branco! Você é demais! rsrsrsrs... Não é à toa que tá no meu (humilde) Blogroll! kkkkkkkk... Beijinhossssss!!!

    solteiras-noivas-casadas.blogspot.com

    ResponderExcluir
  3. vc anda copiando esses tutus dos tumbls e nem credita !!!

    ResponderExcluir
    Respostas
    1. Todo tutorial que não é de minha autoria é devidamente creditado ao menos que eu não saiba quem criou ou caso eu use de base um código pra modifica-lo.

      Esses acima estão T-O-D-O-S com créditos com ‘’link direto’’ para o seu criador então antes de falar merda leia o post se informe primeiro (:

      Excluir
  4. amei o efeito 2 e 3 com certeza vou usar no meu próximo lay <3
    http://conectadas2.blogspot.com.br/

    ResponderExcluir
  5. Todos lindos, adorei o primeiro bem diferente ele ^^

    http://gobelezando.blogspot.com.br/

    ResponderExcluir
  6. Adorei os efeitos <3
    beijos

    depoisdovento.blogspot.com

    ResponderExcluir
  7. Nossa, amei o do preto com branco, sabe como por em todas as fotos de uma vez só ? se sim, me dá um help ! alias seu blog é tão lindo ♥

    ilovestarandbooks.blogspot.com

    ResponderExcluir
    Respostas
    1. Antes de skin
      cole:

      img {
      -webkit-filter: grayscale(0%);
      transition:All 0.4s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;
      }
      img:hover {
      -webkit-filter: grayscale(100%);
      transition:All 1s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;}



      beijus (:

      Excluir
    2. Espero que ajude e obrigada pelo carinho <3

      Excluir
    3. me ajudou e muito,omg vou te por na minha página de créditos, nada mais justo TODOS os seus tutoriais são de muita e excelente ajuda! Usei varios, invejinha da sua perfeição ♥

      Excluir
    4. awn *--* magina guri, se precisar tô aqui õ/

      Excluir
  8. Oi Jack, achei tão bacana esse tuto. Vou testar qualquer horas dessas...
    Bem que vc poderia ensinar como se faz pra fazer essas imagens redondinhas do "You might also like". Acho elas tão fofas, mas num sei colocar no meu blog. :(
    Bjokas flor...

    ResponderExcluir
  9. Todos os efeitos são incríveis :D o que eu mais gostei foi o preto e branco!
    Beeijinhos

    ResponderExcluir
  10. Arrazou vou usar no meu blog .
    Parabéns pelo trabalho eu amei a máquina rosa foto
    beijitos
    www.dicasdajucy.blogspot.com

    ResponderExcluir
  11. Esse preto e branco e muito legal! *o*

    http://garotasederivados.blogspot.com.br/

    ResponderExcluir
  12. Adorei os códigos, principalmente o do efeito moderation.
    CAT GIRL

    ResponderExcluir
  13. Escrevi sobre você no blog *--*

    http://kissyou-mi.blogspot.com.br/

    ResponderExcluir
  14. gostei do ultimo efeito :)
    eu tenho um pouco de medo daquelas bonequinhas que tem na foto da equipe no sidebar kkkkkk -meignore

    estou seguindo aqui.
    http://apenasleiteepimenta.blogspot.com.br/

    ResponderExcluir
  15. Adorei os efeitos, alias o seu blog é muito fofo .
    Aceita parceria ?

    ResponderExcluir
  16. vcs receberam um selinho, clique nesse link : http://mundophotoscapem.blogspot.com.br/ e veja.Bjus
    Myllena/Mundo PhotoScape

    ResponderExcluir
  17. Jackie essa sua equipe e muito boa pena que quando fui avisada da seleçao de colaboradoras voce ja havia escolhido mas tudo bem agora vou focar na faculdade e confirmando SEU BLOG TA SUPER!!! Beijim da Mary :*

    ResponderExcluir
    Respostas
    1. Muuito obrigada Mary!
      Tá certinha em focar na faculdade. Alias formei a equipe justamente pq vou entrar na facul tbm e queria uma ajudinha extra por aqui *---*

      beijus!

      Excluir
  18. amei seu blog achei muito fofo ja estou te seguido fofa me seguede volta:)
    http://http:/mlleglamour.blogspot.com.br

    ResponderExcluir
  19. Amei o Preto e Branco *---* Já estou usando em meu blog hahaha

    Estou seguindo seu blog Flor :)e Curtindo Sua Pagina do Face :D

    Adoraria Que vc Seguise de volta e se possivel curte minha página tbm Tem cm? rs
    Seu Blog se resume em perfeição,seus tutoriais são muito legal,e que concerteja já ajudou muita gente :)

    http://fearless-of-myla.blogspot.com.br

    ResponderExcluir
  20. Hey Jackie ! :3
    adoro seu blog, seus tutoriais me ajudam muuuito.
    Eu queria saber se dá pra por o efeito preto e branco em todas as imagens do blog , Me ajuda ? :x
    Valeu ^^
    topsolb.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Antes de skin
      cole:

      img {
      -webkit-filter: grayscale(0%);
      transition:All 0.4s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;
      }
      img:hover {
      -webkit-filter: grayscale(100%);
      transition:All 1s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;}

      Excluir
  21. Olá, eu nao consigo achar os codicos que tem que procurar por favor me ajude

    ResponderExcluir
    Respostas
    1. vc só tem que achar 1 código que é skin
      se vc NÃO achou não tem nem como eu te ajudar?! O.o

      Excluir
  22. amoore só nao entendi onde usar oq vc escreveu >> quando for usar cole isso ?? onde?

    http://fabiysteisi.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. onde vc quer que o efeito apareça uéé (?)

      por exemplo: se for na barra lateral cole na aba ''HTML java script'', mas se numa postagem tem que ser na aba HTML.

      Excluir
  23. Eu não entendi muito bem o " Quando for usar coloque isso " Usar o que? Colocar onde? Por favor responda ¬¬'

    ResponderExcluir
  24. Amei os efeitos,são todos lindos,as vezes é difícil escolher um só *u*

    http://hobbies-to-autumn.blogspot.com.br/

    ResponderExcluir
  25. Oii eu queria saber um tutorial que as fotos ficasse preto e branco e quando coloca-se o mouse em cima ele ficava normal, mas eu queria isso só nos post relacionados...

    ResponderExcluir
  26. Aqui,na parte de "link da imagem" do preto e branco,eu gostaria de colocar em todas as fotos da postagem,sabe?Eu gostaria de saber,se você puder,qual é o link para colocar automaticamente em todas as postagens.Gostaria muito muito mesmo!

    ResponderExcluir
    Respostas
    1. Antes de skin
      cole:

      img {
      -webkit-filter: grayscale(0%);
      transition:All 0.4s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;
      }
      img:hover {
      -webkit-filter: grayscale(100%);
      transition:All 1s ease;
      -webkit-transition:All 1s ease;
      -moz-transition:All 1s ease;
      -o-transition:All 1s ease;}

      Excluir
  27. Como assim ''quando for usar coloque isso'' (efeito preto e branco) eu não entendi, tem que colocar na onde?

    ResponderExcluir
    Respostas
    1. Onde você quer usar.
      EXEMPLO: se for na barra lateral cole na aba ''HTML java script'', mas se numa postagem tem que ser na aba HTML.

      Excluir
  28. Atrapalha se estiver usando um Layout baixado??

    ResponderExcluir
  29. Tem como usar 2 efeitos juntos?

    ResponderExcluir
  30. Adorei. muito obrigada.
    Eu coloquei para todas as imagens. Só não achei que ia ficar na imagem do nome do meu blog :(


    Visite o blog Minha Fuga da Realidade
    Está rolando sorteio em comemoração aos 2 anos da MFdR , participe!

    ResponderExcluir

.