[TUTORIAL] Efeito de opacidade nas imagens do menu

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Efeito de opacidade nas imagens do menu Empty [TUTORIAL] Efeito de opacidade nas imagens do menu

Mensagem por Solkis em 27.05.09 1:43

Este tutorial irá lhe ensinar como poderá deixar a imagem do menu de navegação do seu fórum com diferentes níveis de cor, variando de uma cor total até uma cor mais opaca. Como o menu principal é um ponto onde muitos membros acedem, é interessante que seja feita algumas modificações no mesmo.



--> Tutoriais e astúcias <--
Efeito de opacidade nas imagens do menu




- Teremos de aceder à "Folha de estilo CSS":
Para que possamos personalizar as caixas de texto do Fórum, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder a:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)
[TUTORIAL] Efeito de opacidade nas imagens do menu Css11
[TUTORIAL] Efeito de opacidade nas imagens do menu 110111Seta Ver o CSS da base do seu fórum - Permite o administrador conferir o estilo padrão do CSS do fórum. Mesmo se você tiver aplicado algum código CSS na folha de estilo, esse CSS base não será alterado. Ele mostra os códigos que personalizam seu fórum sem a necessidade do CSS adicional, que no caso serial a da folha de estilo.
[TUTORIAL] Efeito de opacidade nas imagens do menu 110210Seta Procurar CSS - Com essa ferramenta, podemos fazer uma busca nos códigos existentes na folha de estilo CSS. Por exemplo, se você adicionou algum código na folha de estilo, e pelo fato dela ser muito grande você não estiver encontrando o código desejado, a partir do momento em que digitar o código no campo "Procurar CSS", o código será encontrado (se digitado corretamente).
[TUTORIAL] Efeito de opacidade nas imagens do menu 110310Seta Desativar o CSS de base - Caso desabilite essa opção, o CSS base do seu fórum será desativado, deixando apenas o CSS da folha de estilo.
[TUTORIAL] Efeito de opacidade nas imagens do menu 110410Seta Melhorar seu CSS - Com essa função ativa, a capacidade de carregamento da página é aumentada, facilitando a navegação nas páginas de seu fórum. Mas é importante lembrar que, para que a função funcione normalmente como prometida, você terá que adicionar o código correto na folha de estilo.

[TUTORIAL] Efeito de opacidade nas imagens do menu Act_bottom Segue a tua versão, pois cada versão tem um código diferente. referimos-nos ás versões: PhpBB 2, PhpBB 3, PunBB e Invision.


- Ter uma noção de CSS para modifcar á opacidade:
Antes de adicionarmos o código, temos de saber o que estamos a personalizar, pois teremos um efeito diferente para cada estado da imagem, um quando a mesma estiver normal e outra quando o mouse estiver sobre ela.

Para que possa compreender como terá de estruturar o seu código, quando após a indicação da classe adicionamos o sufixo:
:hover
Isso indica que este efeito será aplicado quando o mouse estiver sobre a secção envolvida pela classe. Existem outros indicadores além deste demonstrado mas, como não é nosso objetivo agora, ficaremos somente com este.

Para as imagens, iremos utilizar estas propriedades:
filter:alpha(opacity=X);
-moz-opacity: Y;
opacity: Y;
Vermelho -> Deverá definir um valor entre 0 e 100, o 0 será totalmente opaco e o 100 seria a iamgem normal. Esta propriedade funcionará somente para o Internet Explorer 7 ou superior.
Violeta -> Será o valor explicado acima dividido por 100 (entre 0 e 1, sendo que valores intermédios, são por exemplo 0.5), estas propriedades serão responsáveis por aplicar este efeito em navegadores como Mozilla Firefox para a primeira propriedade e para Opera e Internet Explorer 6 ou inferior, etc, para a segunda propriedade.



- Agora deverão copiar o código correspondere à versão:
Tendo em conta a versão, e como as classes variam consoante estas, deverse-à escolher a que se adequa ao Fórum onde será aplicada:

[TUTORIAL] Efeito de opacidade nas imagens do menu Versio11 PhpBB 2
a.mainmenu img {
propriedades
}
a.mainmenu img:hover {
propriedades
}


[TUTORIAL] Efeito de opacidade nas imagens do menu Versio12 PhpBB 3
ul.linklist li a img {
propriedades
}
ul.linklist a img:hover {
propriedades
}


[TUTORIAL] Efeito de opacidade nas imagens do menu Versio15 PunBB
#pun-navlinks ul.clearfix a.mainmenu img {
propriedades
}
#pun-navlinks ul.clearfix a.mainmenu img:hover {
propriedades
}


[TUTORIAL] Efeito de opacidade nas imagens do menu Versio14 Invision
#submenu ul li a img {
propriedades
}
#submenu ul li a img:hover {
propriedades
}



- Definir o menu apenas com imagens (sem texto):
Para podermos definir um menu disposto apenas por imagens, devemos aceder a:
Painel de Controle -> Visualização -> Home Page -> Cabeçalho & Navegação
E na opção: "Exibir apenas as imagens no menu de navegação", optam pela opção "Sim".



- Vejamos agora um exemplo:
Imaginemos que pretendemos colocar uma Fórum na versão PhpBB 3, com o menu normal com 40% de opacidade e quando estiver o mouse sobre o menu que este esteja 100%, ou seja com a cor real. Neste caso utilizaríamos o código:
ul.linklist li a img {
filter:alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
ul.linklist a img:hover {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
Por comparação será mais fácil agora construírem o vosso código de forma a poderem dar o efeito de opacidade que pretenderem. Como é óbvio poderão fazer um efeito contrário, o menu ter a cor real e quando o mouse estiver sobre ele, a imagem perder a cor, para isso basta trocar os códigos, definindo para o não hover a opacidade de 100.
Vejamos um exemplo de um tema que dispõe deste efeito:
PHPBB3 Hi-Tech



© Fórum dos Fóruns



[TUTORIAL] Efeito de opacidade nas imagens do menu Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Efeito de opacidade nas imagens do menu
Solkis

Solkis
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 26/01/2008
Mensagens : 9983
Pontos Ativos : 12079

https://ajuda.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum