Efeito de opacidade nas imagens do menu

Ir para baixo

Tutorial Efeito de opacidade nas imagens do menu

Mensagem por Solkis 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 administrativo -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(clique na imagem para aumentar)
Efeito de opacidade nas imagens do menu Css11
[table class=table1][tr][td vAlign=top width="30px"]Efeito de opacidade nas imagens do menu 110111[/td][td]Seta 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.[/td][/tr][/table][table class=table1][tr][td vAlign=top width="30px"]Efeito de opacidade nas imagens do menu 110210[/td][td]Seta 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).[/td][/tr][/table][table class=table1][tr][td vAlign=top width="30px"]Efeito de opacidade nas imagens do menu 110310[/td][td]Seta 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.[/td][/tr][/table][table class=table1][tr][td vAlign=top width="30px"]Efeito de opacidade nas imagens do menu 110410[/td][td]Seta 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.[/td][/tr][/table]

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:

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


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


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
}


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 administrativo -> 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



:copyright: Fórum dos Fóruns



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
Membro Entusiasta

Membro desde : 26/01/2008
Mensagens : 9983
Pontos : 12071

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos