24.10.14

Tutorial Social Spirit: Efeito de Opacidade no Menu Direito



Olá, Lírios! Como estão?

Querem aprender a deixar as imagens do Menu Direito com opacidade? Então é só continuar lendo :D

Créditos ao tópico Dúvidas sobre Styles do Social Spirit. Foi a dona do tópico que descobriu como alterar aquela área e eu adaptei para que tivesse o efeito de opacidade.

Antes de começar, quero fazer um adendo: Você não vai conseguir visualizar suas alterações no arquivo perfil que vem junto com o download do modelo do Style. Portanto, faça todas as alterações necessárias em seu Style e mande-o para o site. Se estiver tudo certo, use o próprio editor do site para fazer as alterações a seguir e use seu perfil para visualizá-las.

Primeiramente, com efeito hover: As imagens ficam mais claras quando passamos o mouse sobre elas.

Copie o código abaixo:



Em seu arquivo modelo.css, procure pela parte onde editamos o Menu Direito (Estilos Menu Direito do Site).



Cole o código depois da última tag, ou seja, após a última chave:




Salve suas alterações e visualize. Deverá ter o mesmo efeito que nesse Style.

Para o efeito ao contrário, como nesse Style, use esse código:



Para deixá-lo apenas com opacidade, sem efeito hover, como nesse Style, faça as mesmas alterações acima, mas usando o código a seguir:



Salve e visualize.

Para outros efeitos bem legais, indico a sessão Dúvidas sobre códigos para imagens desse fórum do Social Spirit.

E então, gostaram? Espero ter ajudado :) Caso tenham alguma dúvida é só comentarem.

Até mais!

Um comentário:

  1. Muito obrigada! Seu blog é minha salvação c:

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...