Humor Nota 10!
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Humor Nota 10!

Você não está conectado. Conecte-se ou registre-se

Humor Nota 10! » Off-Tópic » Tutoriais sobre Programação » [TUTORIAL] Efeito no avatar ao passar o mouse em cima

[TUTORIAL] Efeito no avatar ao passar o mouse em cima

4 participantes

Ir para baixo  Mensagem [Página 1 de 1]

Conrado

Conrado
Administrador
Administrador

[TUTORIAL] Efeito no avatar ao passar o mouse em cima New_ic10 Efeito Ao Passar Mouse no Avatar

Esse efeito é Bem Simples Após Você Por o Mouse Em Cima Do 'Avatar' Ele Se Inclina , Achei Interessante Postar Para Acharem Se Quiserem.
Funciona em todas as Versões

OBS - Ele Só Funcionara Nos Navegadores Mais Avançados .

painel de controle >> vizualização >> Cores >> Folha CSS >> Aplique Codigo, Apos Aplicar Clique Em Validar :

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

Ivision »
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);
}

Resultado :

[TUTORIAL] Efeito no avatar ao passar o mouse em cima Vista10


Créditos: F.D.F

Sayori

Sayori
Gerente
Gerente

Bem legal eu gostei bastante. ^^

TheLord

TheLord
Administrador
Administrador

Tópico aceito, créditos colocado ao verdadeiro autor

http://humor-nota10.olympicweb.net

Conrado

Conrado
Administrador
Administrador

Obrigado por aceitar

Cronos

Cronos
Gerente
Gerente

Ótimo Tutorial Conrado, o efeito fica excelente

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

Humor Nota 10! » Off-Tópic » Tutoriais sobre Programação » [TUTORIAL] Efeito no avatar ao passar o mouse em cima

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