Inclinar avatar

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

Resolvido Inclinar avatar

Mensagem por jPeg. em 19/02/13, 06:21 pm

Qual é minha questão:
Estou com uma dúvida de como botar esta função de inclinar a foto do Membro, se alguém souber por favor, mostreme um tutorial bem explicado, Obrigado desde já !



Endereço do meu fórum:
http://extremelife-rpg.forumeiros.com

Versão do fórum:
PHPBB3
avatar

jPeg.
Nível 5

Masculino
Inscrito dia : 19/02/2013
Mensagens : 48
Pontos Ativos : 92

Ver perfil do usuário http://extremelife-rpg.forumeiros.com

Resolvido Re: Inclinar avatar

Mensagem por Ace em 19/02/13, 06:24 pm

Olá,

Leia:

Spoiler:


Adicionar efeito ao passar o mouse por cima da avatar

Este tutorial é bem simples, quando você adicionar o código (que se encontra a baixo) em sua página CSS, ao passar o mouse por cima do avatar ele irá ter um efeito e ficará na "diagonal".

OBS: Efeito só funcionará em navegadores "mais modernos"

Tutorial retirado da Ajuda forumeiros Italiana.



--> Tutoriais, dicas e astúcias <--
Adicionar efeito ao passar o mouse por cima da avatar


Seta Acesse:

Painel de controles >> Visualização >> Cores >> Folha de estilo CSS >> Aplique o código de sua versão:


Seta Códigos para as devidas versões:

PhpBB2:
Código:
.poster-profile img{
      margin-left: 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;
}
 
.poster-profile img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

PhpBB3:
Código:
div.postprofile dl dt img{
      margin-left: 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.postprofile dl dt img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

PunBB:
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);
}

Invision:
Código:
dl.postdetails dt img{
      margin-bottom: 10px;
    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;
}
 
dl.postdetails dt img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Pronto, após escolher código de sua versão, valide

Seta Resultado final:





© Fórum dos Fóruns & Otaviodg


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Adicionar efeito ao passar o mouse por cima da avatar!.

Até Mais.
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

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