Fórum iBlue
[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


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

Fórum iBlue » Outros Serviços » Suporte Forumeiros » Faqs e Tutoriais » Tutoriais » [TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

T-Lord
Administrador


[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 110111[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar 398853 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 110210[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar 398853 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 110310[TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar 398853 Resultado final:



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

http://www.zonetoony.net/
MakyBory
Membro Lendário
Fica bem legal, recomendo!

http://toon.forumfacil.net/
T-Lord
Administrador
Obrigado por comentar!

http://www.zonetoony.net/
T-Lord
Administrador
Tópico Movido!

http://www.zonetoony.net/

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Fórum iBlue » Outros Serviços » Suporte Forumeiros » Faqs e Tutoriais » Tutoriais » [TUTORIAL] Adicionar efeito ao passar o mouse por cima da avatar

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