[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar

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

Membro Entusiasta
  • 0

[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar Empty [TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar

Mensagem por Cream 02.08.12 15:58


[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar New_ic10

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


[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar 110111Seta Acesse:

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


[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar 110210Seta 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

[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar 110310Seta Resultado final:


[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar Vista10




©️ Fórum dos Fóruns


[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar Act_bottom 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!.
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

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