13 de nov de 2012

Menu com Hover Gradiente

Olá anjos!

Pediram para eu ensinar o menu que usei no Template do meu blog, o LIC. Eu sempre ensino tudo que uso nos meus Templates, afinal, a maioria das coisas eu aprendo em outros blogs. Então não tem porque ficar escondendo.

Esse menu é um com Gradiente, mas o gradiente não passa de uma imagem, que pode ser feita no Photoshop ou em qualquer programa. Claro que também pode ser usado no Menu algum background ou pattern, fica legal.




Exemplo

1- Procure por ]]></b:skin> e acima da tag, cole:

.menugradiente {
background: url('http://i.imgur.com/QtiFr.png');
display: inline-block;
text-align: center;
font-size:14px;
color: #ffffff;
text-shadow: 0 1px 3px #b2b2b2;
float: center;
margin: 2px;
font-family: verdana;
padding: 6px;
width: 100px;
height: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition-duration: .50s;
}
.menugradiente:hover {
background: url('http://i.imgur.com/Hnunx.png');
text-shadow: 0 1px 4px #737070;
-webkit-transition-duration: .60s;
}
- Entendendo o código:

background: url('http://i.imgur.com/Hnunx.png'); - No lugar da url coloque o seu background normal ou gradiente.

display: inline-block;  - Troque inline por outline se quiser que o menu fique um link abaixo do outro e não lado a lado.

text-align: center; - Define o alinhamento do texto. Recomendo que deixe onde está, mas você pode trocar por right (direita) ou left (esquerda).

font-size:14px; - Tamanho da fonte. Quanto maior o número, maior ela fica e vice-versa.

color: #ffffff;  - Cor da fonte.

text-shadow: 0 1px 3px #b2b2b2;  - Cor da sombra.

float: center;  - Alinhamento do menu. A mesma coisa do alinhamento do texto.

margin: 2px; - Espaço entre cada quadradinho do menu. Quanto maior o número, maior o espaço.

font-family: verdana; - Tipo da fonte. 

padding: 6px; - Espaço entre as letras e o fim do quadradinho. Se você aumentar, ele fica maior.

width: 100px; - Largura do quadradinho.

2. Cole isso onde você quiser que o menu apareça(Gadet ou no HTML do blog):

<a href="LINK" alt="­" ><div class="menugradiente">NOME DO LINK</div></a>
<a href="LINK2" alt="­" ><div class="menugradiente">NOME DO LINK 2</div></a>
<a href="LINK3" alt="­" ><div class="menugradiente">NOME DO LINK 3</div></a>
Caso queira adicionar mais links é só acrescentar mais um código:

<a href="LINK" alt="­" ><div class="menugradiente">NOME DO LINK</div></a>

6 comentários:

  1. OII! Amei seu blog é muito bom cheio de utilitário e tutoriais incríveis, está de parabéns!!
    http://pl-poisonlovers.blogspot.com.br/

    ResponderExcluir
  2. Lindo, ja tinha visto fica divo esse efeito..
    Seguindo aqui :)

    HistoriaAgridoce.blogspot | Acesse baby!

    ResponderExcluir
  3. Super explicadinho, assim que eu gosto. Simples mas tão fofinho. Beijos,
    Adolescentes do oposto (blog no perfil)

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!