• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

1 de agosto de 2013

Menu Bail

 

Yoo, 

- tudo bem? estou com uma dor de cabeça chatinha, mais já está passando, acho que é por conta da gripe mesmo .-.
Estou reformando o chocomapa pois muitas pessoas estavam falando que estavam com dificuldade para achar os tutoriais, irá demorar um pouco mais acho que estará reformado logo assim que eu colocar o novo layout ^_^

Já fizeram esse pedido aqui na C-box acho que umas 3 ou 2 vezes, então irei atender.Pediram um tutorial de como fazer esse nosso menu que fica no cabeçalho, bem, na verdade eu retirei esse menu de um efeito que se faz em imagens, e então fiz um psd para ficar como um menu, então dei o nome de menu bail :)
Preview
Primeiro, cole isso acima de ]]></b:skin>:
@-webkit-keyframes baill {
0% {-webkit-transform: rotate(-10deg)    }
50% {-webkit-transform: rotate(10deg)  translate(-20px); }
70% {-webkit-transform: rotate(-10deg)   translate(20px);}
85% {-webkit-transform: rotate(10deg)   translate(-20px);}
90% {-webkit-transform: rotate(-10deg)  translate(20px);}
95% {-webkit-transform: rotate(10deg)   translate(-20px);}
100% {-webkit-transform: rotate(-10deg)   translate(20px);}}
@-moz-keyframes baill { -moz-transform:
 0% {-moz-transform:rotate(-10deg)translate(-20px); }
50%{-moz-transform: rotate(10deg) translate(20px); }
70%{-moz-transform:rotate(-10deg)  translate(-20px); }
85%{-moz-transform:rotate(10deg)  translate(20px); }
90%{-moz-transform:rotate(-10deg)  translate(-20px); }
95%{-moz-transform:rotate(10deg)  translate(20px); }
100%{-moz-transform:rotate(-10deg)  translate(-20px); }}

 @-o-keyframes baill {
   
 0% {-o-transform:rotate(-10deg) translate(-20px);}
50%{-o-transform:rotate( 10deg) translate(20px); }
70%{-o-transform:rotate(-10deg) translate(-20px);}
85%{-o-transform:rotate(10deg) translate(20px);}
90%{-o-transform:rotate(-10deg) translate(-20px);}
95%{-o-transform:rotate(10deg) translate(20px);}
100%{-o-transform:rotate(-10deg) translate(-20px);}
 } @-ms-keyframes baill {
 0% { -ms-transform:}
50%{ -ms-transform:}
0%{ -ms-transform:}
 }



#baill {margin:1px;}
#baill:hover {-webkit-animation:baill 1.2s alternate  linear;
-moz-animation:baill 1.2s alternate infinite linear;
-o-animation: baill 1.2s alternate infinite linear;
-ms-animation:baill 1.2s alternate infinite linear;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;}
Depois, basta colocar isso em um HTML / Javascript:
<a href="LINK"><img src="IMAGEM" id="baill" /></a>
no negrito você coloca o link e no roxo você coloca sua url da imagem, aqui (www) está o PSD feito por mim :)
Espero que tenham gostado.


10 comentários:

  1. Lindo o menu, ansioso pro novo layout ^.^

    Senhor Drama

    ResponderExcluir
  2. Que menu perfeito *-----* irei usar no meu próximo layout O3O
    Beijos ~

    vaonamala0ficial.blogspot.com

    ResponderExcluir
  3. *o* novo layout!! Adoro os layouts daqui e esse está lindo. Estou louca pra ver o novo layout divo :3
    Esse menu é fantástico, simplesmente perfeito!
    Kiss
    With You

    ResponderExcluir
  4. Os seus lays são lindo aguardo o novo ansiosa.
    O menu é lindo!!!

    http://sarang-cute.blogspot.com.br/

    ResponderExcluir
  5. que lindo, acho o menu de vcs tão bonito *---*

    breaking-doubts.blogspot.com.br

    ResponderExcluir
  6. MEGAN FAZENDO NOVO LAYOUT = BULLYING CUMIGU :(((
    Adorei o menu *o*
    Eka odeio gripes, eu tenho enxaqueca então basicamente três dias por semana eu tenho dor de cabeça ^_~

    XOXO :D
    jovenclube.blogspot.com.br

    ResponderExcluir
  7. Otimo tutorial, fico feliz que tenha terminado o layout,
    me procura no Facebook >>Marcelo Raamos<<

    Nateeladopc.tk

    ResponderExcluir
  8. esse mennu é muito lindo o/
    amei demais.
    acervo-de-livros.blogspot.com

    ResponderExcluir