Efeito menu hover no Animespirit | Social Spirit

Style The Fault in Our Stars

Olá galerinha geek! Como estão? :)

Como prometido, trouxe para vocês um tutorial que ensina a colocar o efeito hover no Animespirit | Social Spirit.

Mas o que é o efeito hover?

Ele permite que determinado elemento mude de forma quando passam o mouse por cima dele. Por exemplo, no Style "Você despertou meu espírito de luta!", quando você passa o mouse sobre o menu, o fundo dos links mudam de cor, como mostrado na imagem abaixo:

Exemplo de efeito hover

Entenderam? Então vamos começar o tutorial!

Após baixar o arquivo modelo.v2.2 do site, extraia o conteúdo em uma pasta. Abra o bloco de notas modelo.

Clique no bloco de notas, aperte Ctrl + F e procure pela tag #secaoNav  { . Cole o código abaixo antes da tag.

#nav a:hover {
background-color: #791f1f; /* cor do fundo do hover */
color: #fff; /* cor da fonte do hover */
font-weight:bold;
padding-top: 3px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

Mude os valores de background-color e color para alterar as cores. Você pode consultar a tabela de cores da internet ou clicar no Seletor de Cores do Photoshop.

A parte que destaquei em negrito deixa o fundo com bordas arredondadas. Se não quiser, basta apagar. Se quiser que fiquem mais redondas, mude o valor dos pixels.

Aperte Ctrl + S e veja se funcionou. Deu certo? Ótimo! Fim do nosso tutorial :) Simples, né?