♦ Tutorial ~ Menu 3D


Hey Rilakkumas
  Estou morrendo de felicidade sozinho aqui, ontem eu havia baixado o cd do PANIC! AT THE DISCO e só lembrei de escutar agora, vocês não tem noção da perfeição que isso é, estava com muita saudade da banda e ouvindo essas músicas novas me sobe um arrepio de satisfação.
  Bem, já que estou tão animado resolvi trazer um dos primeiros menus com efeito key-frame que eu fiz, ele se chama Menu 3D, mas ele não é 3d só coloquei esse nome por causa das cores que usei. O efeito ficou bem agradável e harmonioso espero que gostem. Preview.


Vá em MODELO >> EDITAR HTML e procure por ]]></b:skin>
E cole este código em cima dele.
@-webkit-keyframes mntd {
20% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
40% {box-shadow:-4px 4px 0px #cf1f1b, 4px -4px 0px #426d95}
60% {box-shadow:-4px -4px 0px #cf1f1b, 4px 4px 0px #426d95}
80% {box-shadow:4px -4px 0px #cf1f1b, -4px 4px 0px #426d95}
100% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
}
@-moz-keyframes mntd {
20% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
40% {box-shadow:-4px 4px 0px #cf1f1b, 4px -4px 0px #426d95}
60% {box-shadow:-4px -4px 0px #cf1f1b, 4px 4px 0px #426d95}
80% {box-shadow:4px -4px 0px #cf1f1b, -4px 4px 0px #426d95}
100% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
}
@-o-keyframes mntd {
20% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
40% {box-shadow:-4px 4px 0px #cf1f1b, 4px -4px 0px #426d95}
60% {box-shadow:-4px -4px 0px #cf1f1b, 4px 4px 0px #426d95}
80% {box-shadow:4px -4px 0px #cf1f1b, -4px 4px 0px #426d95}
100% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
}
@-ms-keyframes mntd {
20% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
40% {box-shadow:-4px 4px 0px #cf1f1b, 4px -4px 0px #426d95}
60% {box-shadow:-4px -4px 0px #cf1f1b, 4px 4px 0px #426d95}
80% {box-shadow:4px -4px 0px #cf1f1b, -4px 4px 0px #426d95}
100% {box-shadow:4px 4px 0px #cf1f1b, -4px -4px 0px #426d95}
}
.mntd {
float:left; margin:10px; width:25px; height:25px; background:#2d2d2d; -MOZ-OUTLINE-OFFSET: -10PX; -o-OUTLINE-OFFSET: -10PX; -webkit-OUTLINE-OFFSET: -10PX; OUTLINE: 10px double rgba(250,250,250,0.2); -webkit-transform: rotate(45deg); -webkit-transition-duration: .80s; -moz-transition-duration: .80s; -o-transition-duration: .80s; -ms-transition-duration: .80s; transition-duration: .80s;
}
.mntd:hover {
OUTLINE: 10px double rgba(250,250,250,0.5); -webkit-transition-duration: .80s; -moz-transition-duration: .80s; -o-transition-duration: .80s; -ms-transition-duration: .80s; transition-duration: .80s;
 -webkit-animation: mntd 2s alternate infinite linear; -moz-animation: mntd 2s alternate infinite linear; -o-animation: mntd 2s alternate infinite linear; -ms-animation: mntd 2s alternate infinite linear;}
Não precisa editar NADA

E onde você quiser que o menu apareça cole o código de baixo.
Aqui tem 4 links, mas se você quiser mais é só repetir o <a href="LINK" title="NOME" class="mntd"></a> mais algumas vezes e pronto. Não se esqueça de alterar o que precisa.
<center>
<a href="LINK" title="NOME" class="mntd"></a>
<a href="LINK" title="NOME" class="mntd"></a>
<a href="LINK" title="NOME" class="mntd"></a>
<a href="LINK" title="NOME" class="mntd"></a>

5 comentários:

  1. Show de Bolice ~like Kung Fu Panda~
    Acho que em afiliados também ficaria legal ^3^

    ResponderExcluir
  2. Imagino o trabalhão que isso deu ><
    status: brizando no preview heheuehu

    just--dont.blogspot.com

    ResponderExcluir
  3. Faz um post de playlist pls?? Preciso urgentemente de músicas novas ^^

    Legal o menu! Gostei dele ser triangular, acho que nunca tinha visto ^^

    ResponderExcluir
  4. Eu ADOREI esse tuto! E fiquei a sonhar com ele, então, como sempre, chegeui a ideias mirabolantes - não dá para usar isso numa imagem? Png ou não, não importa. Porque eu adoraria ver esse efeito à volta de uma, e não apenas nesse quadrado. Ainda tentei adaptar e depois daria os créditos, mas não deu >.<

    ~Forever Sapo

    ResponderExcluir
  5. Possa, deve ter dado um trabalhão fazer este menu! Mas está muito giro e diferente. Adoro o teu blog e gostava de me tornar afiliado, aceitas?

    Teen Cat

    ResponderExcluir