25/01/2013

Tutorial: Menu Shadow

Hey guys, how are you?
Bom, hoje eu vim aqui pra postar um tutorial que me pediram na ask, de como fazer um menu igual o do blog. Com ele eu trago o blog de tutoriais, como eu prometi. Não ficou lá aquelas maravilhas, MAS...
Bom, os créditos vão ao Birthday Cake, foi de la que eu tirei o menu.
Visualize aqui.
Quer ver como se faz? Lets Go~

Vá no seu HTML e pesquise por /b:skin e cole o seguinte código abaixo dele
mh {color: #eeeeee; font-family: 'verdana'; font-size: 10px; background: #CORDEFUNDO; padding: 20px; display: inline-block; -webkit-transition-duration: .80s; -o-transition-duration: .80s; -moz-transition-duration: .80s; -ms-transition-duration: .80s; cursor: size; border: 0px solid #000; box-shadow: inset 0 0 75px 75px #CORDEFUNDODOMENU, 0 0 0 #CORDEFUNDODOMENU;}
mh:hover {box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;}
 Para fazer o menu funcionar, adicione um HTMLJavaScript e cole nele o seguinte código quantas vezes for necessário
<a href="LINKAQUI">mh>SEULINK</mh></a>

16 comentários:

  1. Esse menu é incrível, dá vontade de ficar toda hora passando o mouse por cima SUAHSUA'

    Beijos Querido *3*

    www.blog-bluesky.blogspot.com

    ResponderExcluir
  2. Que menu lindo :)
    beijos

    depoisdovento.blogspot.com

    ResponderExcluir
  3. Esse menu é lindo, estava à espera que postasse o tutorial.
    Beijos
    CAT GIRL

    ResponderExcluir
    Respostas
    1. Obrigado por me ter colocado nos destaques *-*

      Excluir
  4. Olá! Bem legal o menu, diferente, enfim, LINDO.

    ~ Apples Flying
    Visita?

    ResponderExcluir
  5. o menu é realmente lindo, tem um efeito bem diferente. adorei. bezzo, sarah
    http://svt-pistache.blogspot.com.br/

    ResponderExcluir
  6. Engraçado que eu acabei de ver um blog com esse tutorial, só que o dele era com as bordas arredondadas! rsrsrs
    backlash7.blogspot.com

    ResponderExcluir
  7. interessante esse menu é bem simples
    nao sei mexer no meu ate hoje
    uahsuahsuhaushausha
    so a menina que fez que sabe e olha que ja tentei desbravar e necas
    nada de entender
    ushauhaushaushuahsuahsuash
    gostei


    radiopires.blogspot.com

    ResponderExcluir
  8. Esse menu é perfeito, ele é bem simples e tem um efeito lindo.
    Beijos ;*

    Designer Lovers

    ResponderExcluir
  9. Já conhecia,acho ele lindo! ~Seguindo!

    Visita?
    http://revolutionstartshere-oficial.blogspot.com/

    ResponderExcluir
  10. Que menu lindo *0*

    #Bezoos~~> Kashmeres.blogspot.com

    ResponderExcluir
  11. Fica um efeito muito legal! Gostei muito do menu, Luiz! Eu adoro menus assim, são muito fáceis e com efeitos muito legais! ^^

    Beijoos, Paula! ♥
    ~Sweet Makeup~
    (clica no perfil pra visitar meu blog)

    ResponderExcluir
  12. O menu parece ser bem fácil, como eu nunca consigo fazer um menu. Considero todos que conseguem um gênio. Mas este parece ser bem fácil mesmo, vou ver se consigo fazer ele. Aquela foto da do sanduiche é muito legal mesmo! Estou seguindo o BT, beijos!

    Espero sua visita:

    http://blogfadosrebeldes.blogspot.com.br/

    ResponderExcluir
  13. Ótimo tutorial, gostei do menu... talvez use num próximo lay.
    space-sweet-girl.blogspot.com

    ResponderExcluir
  14. Adorei o menu, muito lindo e perfeito. Talvez eu use num próximo layout. Você explica muito bem. :)

    O blog chegou aos 500 seguidores e você ajudou com que ele chegasse nesta meta. Obrigada!
    Até, chassy-bomb.blogspot.com.

    ResponderExcluir
  15. Que perfect esse menu!! E adorei o lay tbm!!!
    Se gostar segue?
    garotadabolsa.blogspot.com

    ResponderExcluir

-Comente algo legal sobre o que achou do post
-Não xingue,seja amigável
-Afiliação só por comentário
-Sem plágios!
- Seguindo,segue de volta? Nem visito e nem sigo o blog