28 janeiro 2013

Menu Agitated



Hoy' ^^ trouxe um tutorial do menu que estou usando, se vocês ainda não viu  aqui esta a Preview, eu achei ele la no Chá com Anjos, creditos ao blog e ao Tumblr criador, Single Themes|Tumblr. Todos os creditos a esses dois~



 Primeiro va no seu HTML e pesquise por <head>  e cole o seguinte codigo acima da tag

<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'/>


Essa é a fonte, pode troca-la se quiser mas com essa fonte o efeito fica mais bonito, para continar com o tutorial clique no seguinte link








Depois disso cole esse codigo acima de /b:skin


/*********** Menu Agitated *****************/
/* Animação */
@-webkit-keyframes gangorra {
from {-webkit-transform: rotate(10deg);}
to {-webkit-transform: rotate(-10deg);}
}
@-moz-keyframes gangorra {
from {-moz-transform: rotate(10deg);}
to {-moz-transform: rotate(-10deg);}
}
@-o-keyframes gangorra {
from {-o-transform: rotate(10deg);}
to {-o-transform: rotate(-10deg);}
}
/* Menu */
mn {display: inline-block;
font-family: 'Fjalla One', cursive;
font-size: 25px; /* Tamanho da fonte */
background: #fe579c; /* Cor de fundo do menu */
padding: 2px;
text-align: center;
text-transform: uppercase;
border-radius: 5px;
color: #fff; /* Cor da fonte */
cursor: pointer;
text-shadow: 2px 2px 0px #e9508f; /* Sombra nas palavras do menu */
width: 90px; /* Tamanho do Menu */
}
mn:hover {
    -webkit-animation-name: gangorra;
    -webkit-animation-duration: .01s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
-moz-animation-name: gangorra;
    -moz-animation-duration: 0.1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
-o-animation-name: gangorra;
    -o-animation-duration: 0.1s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: alternate;}



Personalize como quiser, as explicações ja estão no codigo.

Feito tudo isso, crie um Gadget de HTML/Java Script e cole:



<a href="/"><mn>Home</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>
<a href="/"><mn>Link</mn></a>



Mude as partes em negrito e salve




Kissus and Bye bye^^


Um comentário:

  1. Yoooo Tatá-Chan,tenho uma tag pra vc ^^ http://blogbolinhodearroz.blogspot.com.br/2013/01/tag-de-incentivo-leitura.html

    Kissus!!1Bye!!!

    ResponderExcluir

Comente o que quiser, mas com o minimo de respeito, ok >:?