05 novembro 2012

Efeito CSS3 - Menu Middle Of Nowhere

http://static.tumblr.com/sxeyvs3/cr5md0plj/44.png 

Hello  :)
Como vocês estão ?
Curioso não ? 
Hoje eu trouxe mais um menu de minha criação, que eu dei o nome de Middle Of Nowhere, música da minha diva Selena.
Ele é bem bonitinho, se vocês quiserem poder visualiza-lo  aqui !

Gostaram ? Então vamos ao tutorial :)


Primeiro  procure por <head> cole o código abaixo em baixo da tag encontrada.
<link href='http://fonts.googleapis.com/css?family=Offside' rel='stylesheet' type='text/css'/>

Agora aperte F3 ou CTRL+F e Procure por ]]</b:skin>.
 Logo acima cole o código abaixo:
severn {
border-bottom: 5px solid red;
font-family: offside;
width: 150px;
height: 7px;
font-size: 20px;
color: #fff;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
severn:hover {
color: red;
padding-left: 10px;
border-bottom: 5px solid white;
padding-left: 10px;
letter-spacing: -1px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

Altere onde está marcado, agora para usar é só adicionar um Gadget HTML/Jasvascript , com o código abaixo:

<center>
<a href="#"><severn>Menu</severn></a>
<a href="#"><severn>Por</severn></a>
<a href="#"><severn>Rodolfo S.</severn></a>
<a href="#"><severn>Credite</severn></a>
<a href="#"><severn>Se for</severn></a>
<a href="#"><severn>Usar :)</severn></a>
</center>

12 comentários:

  1. Adoorei :3 ,To seguindo, segue?
    purpurinadelycadah.blogspot.com.br

    ResponderExcluir
  2. Este comentário foi removido pelo autor.

    ResponderExcluir
  3. Oi de novo :) Peço desculpas pela Taís ter falado "minha querida". Já falei com ela, ok? Mil desculpas mesmo, por ela. Sucesso *-*

    http://explodindoglitter.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ai meu Deus! Que vergonha... Mil desculpas. :( Ando tão ocupada retribuindo os comentários que me engano!! Desculpa, e seu blog é simplesmente perfeito! Sucesso sempre querido!
      ~ Seguindo! Kissus :)

      http://explodindoglitter.blogspot.com.br/

      Excluir
  4. Flor o seu blog é muito lindo ^-^ Segui os meus ? http://kawaiicutebr.blogspot.com.br/ http://spoiledgirlsbr.blogspot.com.br/

    ResponderExcluir
  5. Amei esse menu muito criativo e diferente, parabéns *_*


    californiadreams2.blogspot.com.br

    ResponderExcluir
  6. Que menu mais fofo, adorei o efeito, nunca tinha visto nenhum nem mesmo parecido.

    overdosedeloucura.blogspot.com

    ResponderExcluir
  7. adorei, o resultado fica super lindo! O blog ta lindo :3

    rabisqueamesa(.blogspot.com.br)

    ResponderExcluir
  8. acta afiliação *----* muleke-ousado.blogspot.com

    ResponderExcluir

Comente que eu retribuo!