Efeito de opacidade nas imagens do menu
Página 1 de 1
Efeito de opacidade nas imagens do menu
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.
1º - 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
[table class=table1][tr][td vAlign=top width="30px"]
[/td][td]
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"]
[/td][td]
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"]
[/td][td]
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"]
[/td][td]
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]
2º - 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:
Para as imagens, iremos utilizar estas propriedades:
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.
3º - 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:
4º - 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".
5º - 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:
Vejamos um exemplo de um tema que dispõe deste efeito:
PHPBB3 Hi-Tech
--> Tutoriais e astúcias <--
Efeito de opacidade nas imagens do menu
Efeito de opacidade nas imagens do menu
1º - 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
[table class=table1][tr][td vAlign=top width="30px"]
![Barra do menu transparente - Efeito de opacidade nas imagens do menu 110111](https://i.servimg.com/u/f36/11/66/91/15/110111.gif)
![Seta](/users/2612/28/77/07/smiles/398853.gif)
![Barra do menu transparente - Efeito de opacidade nas imagens do menu 110210](https://i.servimg.com/u/f36/11/66/91/15/110210.gif)
![Seta](/users/2612/28/77/07/smiles/398853.gif)
![Barra do menu transparente - Efeito de opacidade nas imagens do menu 110310](https://i.servimg.com/u/f36/11/66/91/15/110310.gif)
![Seta](/users/2612/28/77/07/smiles/398853.gif)
![Barra do menu transparente - Efeito de opacidade nas imagens do menu 110410](https://i.servimg.com/u/f36/11/66/91/15/110410.gif)
![Seta](/users/2612/28/77/07/smiles/398853.gif)
![]() | 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. |
2º - 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:
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.:hover
Para as imagens, iremos utilizar estas propriedades:
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.filter:alpha(opacity=X);
-moz-opacity: Y;
opacity: Y;
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.
3º - 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:
![]() | PhpBB 2 |
|
![]() | PhpBB 3 |
|
![]() | PunBB |
|
![]() | Invision |
|
4º - 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".
5º - 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:
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.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;
}
Vejamos um exemplo de um tema que dispõe deste efeito:
PHPBB3 Hi-Tech
:copyright: Fórum dos Fóruns
![]() | 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 |
![-](https://2img.net/i/fa/fdf3/moins10.png)
» Efeito de opacidade nas imagens do menu
» Efeito de opacidade nas imagens do menu
» Efeito de opacidade nas imagens do menu
» [Resolvido] Efeito opacidade no menu
» Menu de navegação com efeito de opacidade
» Efeito de opacidade nas imagens do menu
» Efeito de opacidade nas imagens do menu
» [Resolvido] Efeito opacidade no menu
» Menu de navegação com efeito de opacidade
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos