Efeito opacidade no banner

3 participantes

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

Tópico resolvido Efeito opacidade no banner

Mensagem por Leeh_Campos 23.02.13 16:44

Qual é minha questão:
Estava procurando um código, n sei de é CSS ou HTML, para que o banner do fórum ficasse por exemplo, quando passa o mouse, ele acende e quando tira fica escuro, como vi nesse fórum http://sk-clansamp.forumeiros.com/ poderiam me explicar como  faz isso ?
Endereço do meu fórum:
Não é necessário.

Versão do fórum:
PHPBB3
Leeh_Campos

Leeh_Campos
Novo Membro

Membro desde : 03/12/2011
Mensagens : 15
Pontos : 25

http://brstarcity.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito opacidade no banner

Mensagem por Leeh_Campos 23.02.13 17:32

Urgente ! algum pfvr !
Leeh_Campos

Leeh_Campos
Novo Membro

Membro desde : 03/12/2011
Mensagens : 15
Pontos : 25

http://brstarcity.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito opacidade no banner

Mensagem por RodrigoNunes 23.02.13 17:42

Olá, isso é um efeito Hover. É um CSS.
Código:

.fade {
         display:inline-block;
         background: -moz-linear-gradient(left, rgb(36,36,36) 0%, rgba(36,36,36,0) 100%);
         background-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgb(36,36,36)), color-stop(1.00, rgba(36,36,36,0)));
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#242424, endColorstr=#00242424, GradientType=1);
         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#242424, endColorstr=#00242424, GradientType=1)";
      }
      .blur {
         display:inline-block;
         color:#ddd;
         text-shadow: 0 0 2px #aaaaaa;
         text-shadow: 0 0 4px #aaaaaa;
         text-shadow: 0 0 6px #aaaaaa;
         -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=2)";
         filter:
            progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
            progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
      }
      .flipH {
         display:inline-block;
         -moz-transform:scale(-1,1);
         -o-transform:scale(-1,1);
         -webkit-transform:scale(-1,1);
         transform:scale(-1,1);
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
         filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-1,
            M12=0,
            M21=0,
            M22=1,
            SizingMethod="auto expand");
      }
      .flipV {
         display:inline-block;
         -moz-transform:scale(1,-1);
         -o-transform:scale(1,-1);
         -webkit-transform:scale(1,-1);
         transform:scale(1,-1);
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')";
         filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=0,
            M21=0,
            M22=-1,
            SizingMethod="auto expand");
      }

Adicione isso em seu css e salve.
RodrigoNunes

RodrigoNunes
***

Membro desde : 16/09/2012
Mensagens : 130
Pontos : 184

http://darkgames.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito opacidade no banner

Mensagem por Leeh_Campos 23.02.13 18:15

RodrigoNunes escreveu:Olá, isso é um efeito Hover. É um CSS.
Código:

.fade {
         display:inline-block;
         background: -moz-linear-gradient(left, rgb(36,36,36) 0%, rgba(36,36,36,0) 100%);
         background-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgb(36,36,36)), color-stop(1.00, rgba(36,36,36,0)));
         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#242424, endColorstr=#00242424, GradientType=1);
         -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#242424, endColorstr=#00242424, GradientType=1)";
      }
      .blur {
         display:inline-block;
         color:#ddd;
         text-shadow: 0 0 2px #aaaaaa;
         text-shadow: 0 0 4px #aaaaaa;
         text-shadow: 0 0 6px #aaaaaa;
         -ms-filter: "progid:DXImageTransform.Microsoft.Blur(pixelradius=2)";
         filter:
            progid:DXImageTransform.Microsoft.MotionBlur(strength=1,direction=310)
            progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
      }
      .flipH {
         display:inline-block;
         -moz-transform:scale(-1,1);
         -o-transform:scale(-1,1);
         -webkit-transform:scale(-1,1);
         transform:scale(-1,1);
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
         filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-1,
            M12=0,
            M21=0,
            M22=1,
            SizingMethod="auto expand");
      }
      .flipV {
         display:inline-block;
         -moz-transform:scale(1,-1);
         -o-transform:scale(1,-1);
         -webkit-transform:scale(1,-1);
         transform:scale(1,-1);
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')";
         filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=0,
            M21=0,
            M22=-1,
            SizingMethod="auto expand");
      }

Adicione isso em seu css e salve.

Não deu ;x salvou e etc, mas não fez diferença !
Leeh_Campos

Leeh_Campos
Novo Membro

Membro desde : 03/12/2011
Mensagens : 15
Pontos : 25

http://brstarcity.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito opacidade no banner

Mensagem por BrunoH. 23.02.13 18:21

Olá!
Aceda a Folha de Estilo CSS:
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de estilo CSS
Código:
Código:
#i_logo {
-moz-opacity: .6;
-moz-transition-duration: .8s;
-o-transition-duration: .8s;
-webkit-transition-duration: .8s;
filter: alpha(opacity=40);
opacity: .6;
}
#i_logo:hover {
-moz-opacity: .6;
filter: alpha(opacity=40);
opacity: 1;
}
e Valide!

- Caso não resulte, preciso que o senhor informe-nos o endereço de seu fórum, para que eu possa verificar qual seria o problema.

Até mais.
BrunoH.

BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

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