Efeito opacidade no banner

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

Resolvido Efeito opacidade no banner

Mensagem por Leeh_Campos em 23/02/13, 01:44 pm

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
avatar

Leeh_Campos
Nível 3

Feminino
Inscrito dia : 03/12/2011
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://brstarcity.forumeiros.com/

Resolvido Re: Efeito opacidade no banner

Mensagem por Leeh_Campos em 23/02/13, 02:32 pm

Urgente ! algum pfvr !
avatar

Leeh_Campos
Nível 3

Feminino
Inscrito dia : 03/12/2011
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://brstarcity.forumeiros.com/

Resolvido Re: Efeito opacidade no banner

Mensagem por RodrigoNunes em 23/02/13, 02:42 pm

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.
avatar

RodrigoNunes
Nível 8

Masculino
Inscrito dia : 15/09/2012
Mensagens : 130
Pontos Ativos : 184

Ver perfil do usuário http://darkgames.forumeiros.com

Resolvido Re: Efeito opacidade no banner

Mensagem por Leeh_Campos em 23/02/13, 03:15 pm

@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 !
avatar

Leeh_Campos
Nível 3

Feminino
Inscrito dia : 03/12/2011
Mensagens : 15
Pontos Ativos : 25

Ver perfil do usuário http://brstarcity.forumeiros.com/

Resolvido Re: Efeito opacidade no banner

Mensagem por BrunoH. em 23/02/13, 03:21 pm

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.
avatar

BrunoH.
Principal contribuidor
Principal contribuidor

Inscrito dia : 15/06/2012
Mensagens : 7675
Pontos Ativos : 10382

Ver perfil do usuário http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

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

- Tópicos similares

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