21/02/2013

TUTORIAL-efeito back

          
                                                         eu ri com essa foto *.* kkkkk

Boa tarde pessoal,hoje devem ter percebido que eu estou postando bastante,(essa é a segunda vez,seu idiota)o motivo é que eu vou sair hoje de tarde e não vou poder postar.
Agora voltando ao nosso post,vou ensinar um efeito novo pra mim,que eu aprendi no WOT.
Para visualizar o efeito é só clicar aqui.
Ele é mais usado para os autores,mais deve ficar legal no lugar de uma divulgação,se eu tivesse visto antes,eu teria posto esse efeito na divulgação do meu cabeçalho,se quiser aprender,clique em leia mais...


VÁ NA SUA CONTA DO BLOGGER CLIQUE EM MODELO>>EDITAR HTML>> E PROCURE POR  ]]></b:skin>.

Encima da tag cole:
/*** efeito back por htmlstrew ***/
@-WEBKIT-KEYFRAMES PULSE {0% { -WEBKIT-TRANSFORM: SCALE(1); }50% { -WEBKIT-TRANSFORM: SCALE(1.1); }100% { -WEBKIT-TRANSFORM: SCALE(1); }}
.moddib {background: url('urlimagem'); height: 100px; width: 133px; display: inline-block; -webkit-transition-duration: 0.5s; margin-left:10px;}
.moddib:hover {background-position: right; -WEBKIT-ANIMATION: PULSE 1S;-MOZ-ANIMATION: PULSE 1S;-MS-ANIMATION: PULSE 1S; -webkit-transition-duration: 0.5s; }
No código,você só deve substituir o URL da imagem. Veja um exemplo com as medidas abaixo:


Agora,para adicionar mais autores,coloque repita o código e troque o '.moddib' por '.moddib2', e assim vai, entenderam? Mas só repita a partir da tag que eu coloquei no exemplo,mesmo...

Para o efeito aparecer, cole o código apresentado no blockquote em um gadget:
<a href="link"><div class="moddib"></div> 


SUPER PRÁTICO NÉ?

créditos pela imagem com as larguras: http://world-of-tutos.blogspot.com.br

11 comentários:

  1. nosssa,já tinha visto um efeito desse em um blog,queria saber,mais não tinha ideia como era o nome e como faz,mais agora deu pra entender direitinho no tutorial,além do efeito ficar muiito legal mesmo...obriiigada...

    ResponderExcluir
  2. Gostei vou usar no novo lay!
    ga, me ajuda com meu novo lay?
    http://lay-reign.blogspot.com/ me da dicas *u*

    ResponderExcluir
    Respostas
    1. te ajudo sim,mais blogckote não é bem a minha áre...kkkk
      o lay ta perfeito,nem tenho o que te ajudar...
      acho que o menu podia mudar,vou te dar o link de um bem bonito:
      http://birthdaycakeoficial.blogspot.com.br/2013/02/tutorial-menu-invert.html

      Excluir
    2. eu fiz esse menu AQUI no hora,também tirei o fundo como vc,mais eu não quis usar,acho que esse que to usando ta melhor!

      Excluir
    3. Oq eu coloquei no lay do R.O fui eu quem inventou, foi tipo uma adequação do menu glow!~

      Excluir
  3. vc apenas tirou o fundo e mudou a cor,eu tinha feito o mesmo que vc aqui no hora, o.o

    ResponderExcluir