Ligado!
Bem-vindo ao Ligado! Registre-se agora e participe de nossos debates, acesse os tutoriais, tenha sua conta com avatares, e dispute pelos rankings no fórum!


(Não requer confirmação por email)


Já possui conta no fórum? Então conecte-se e comece a aventura!


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

Adicionar efeito ao passar o mouse por cima de um avatar

avatar

Admin

Líder da Comunidade
Líder da Comunidade



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


Arrow Acesse:


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



Arrow
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

Arrow 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!.



Ligado! Community Leader
adminAdmin sugere:Administradores Não dê sua senha a ninguém!Administradores  Antes de criar um novo tópico, faça uma pesquisa.Administradores Respeite as regras do fórum e seja um bom membro.

staff

Admin, em Sab 13 Out 2012, 20:17    #1



Gostou deste tópico? Então você também vai gostar destes aqui: