Como colocar efeito deslizante na logo do rank e na imagen do avatar

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

Resolvido Como colocar efeito deslizante na logo do rank e na imagen do avatar

Mensagem por ggames2013 em 23/07/13, 11:16 pm

Qual é minha questão:
Como vocês podem ver, no forum do meu colega Lulzgamehacking.net, quando alguem posta algo, quando você passa o cursor em cima da logo do rank da um efeito tipo deslizante, e na imagen do avatar tambem.

Obs:  Esses efeitos não é do vBulletin, porque antes dele colocar vBulletin ja tinha esse efeito.

Endereço do meu fórum:
http://codeskill.forumeiros.com

Versão do fórum:
PUNBB
avatar

ggames2013
Nível 2

Masculino
Inscrito dia : 23/07/2013
Mensagens : 5
Pontos Ativos : 9

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

Resolvido Re: Como colocar efeito deslizante na logo do rank e na imagen do avatar

Mensagem por Sennior em 24/07/13, 12:15 am

Seja bem-vindo ao nosso fórum de Suporte! Como acabou de se inscrever, veja aqui alguns links importantes a saber:

Boa noite caro e bem vindo ao FDF! Muito feliz

Necessito que o senhor mande o link do fórum que contem a função que deseja colocar em teu fórum.

Até mais.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Como colocar efeito deslizante na logo do rank e na imagen do avatar

Mensagem por Tofu em 24/07/13, 12:36 am

Olá meu caro!

Tente isso:

Código:
div.user-basic-info img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}


Adicione em sua CSS (Painel > Visualização > Imagens e Cores > Cores > Folha de Estilo).

Espero ter ajudado.

Tofu
Nível 10

Masculino
Inscrito dia : 15/07/2013
Mensagens : 284
Pontos Ativos : 428

Ver perfil do usuário http://verdadeplena.tk

Resolvido Re: Como colocar efeito deslizante na logo do rank e na imagen do avatar

Mensagem por MateusA em 24/07/13, 08:01 am

Olá!

Aceda á "Folha de Estilos CSS":
Painel de Controle Seta Visualização Seta Imagens e Cores Seta Cores Seta Folha de Estilos CSS
Adicione o seguinte código no inicio da sua "Folha de Estilos CSS"

Código:
        div.user-basic-info img{
            margin: 3px;
            border: 5px solid #eee;
            -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
            -webkit-transition: all 0.5s ease-out;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
        }
       
        div.user-basic-info img:hover {
            -webkit-transform: rotate(-7deg);
            -moz-transform: rotate(-7deg);
            -o-transform: rotate(-7deg);
        }

Valide e veja o resultado.
Tive uma idéia!
Atenciosamente,
Crazy.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

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