Postado Sex Dez 21, 2012 8:37 pm
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] 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"
--> Tutoriais, dicas e astúcias <--
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] Acesse </rx>
<vr> Painel de controles >> Visualização >> Cores >> Folha de estilo CSS >> Aplique o código de sua versão: </vr>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] <rx> Codigos Para As Devidas Versoes :</rx>
<v> PhpBB2</v>
<V> PhpBB3: </v>
<v> PunBB </v>
<v> Invision </v>
Pronto, após escolher código de sua versão, valide
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
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"
--> Tutoriais, dicas e astúcias <--
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
<vr> Painel de controles >> Visualização >> Cores >> Folha de estilo CSS >> Aplique o código de sua versão: </vr>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem] <rx> Codigos Para As Devidas Versoes :</rx>
<v> PhpBB2</v>
- 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);
}
<V> PhpBB3: </v>
- 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);
}
<v> PunBB </v>
- 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);
}
<v> Invision </v>
- 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
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]