24.1.14

Efeito menu hover no Animespirit | Social Spirit

Style The Fault in Our Stars

Olá Lírios! Como estão? :)

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

Mas Hale, 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é?

2 comentários:

  1. o codigo q vc se refere é isso tudo:

    #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;
    }

    ????

    ResponderExcluir
    Respostas
    1. Isso mesmo. Como expliquei, esse código dará o efeito hover no menu do seu Style. As últimas 4 linhas do código dão o efeito de bordas arredondadas, essa parte fica a seu critério colocar ou não.

      Até mais!

      Excluir

Related Posts Plugin for WordPress, Blogger...