Marcos Augusto
CoordenadorEfeito giratório no avatar |
Faça seu avatar dar várias voltas, é isso o que o tutorial propõe, uma modificação simples que faz com que o seu avatar comece a rodar simplesmente passando o seu mouse (rato) por cima.
Atenção, este efeito só funcionará em navegadores mais recentes. |
--> Tutoriais, dicas e astúcias <--
Efeito giratório no avatar
Efeito giratório no avatar
1º - Teremos de aceder à "Folha de estilo CSS"
Para que possamos personalizar o fundo da baliza código, é necessário adicionar códigos CSS para criarmos o efeito desejado, sendo assim, teremos de aceder à:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS
2º - Códigos das respectivas versões
Aqui se encontram os códigos para cada versão de fórum disponível no Forumeiros:
- PHPBB2:
- Código:Selecionar conteúdo
span.postdetails.poster-profile a img:hover{
-webkit-transform: rotate(1800deg) scale(1);
-moz-transform: rotate(1800deg) scale(1);
-o-transform: rotate(1800deg) scale(1);
}
span.postdetails.poster-profile a img{
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
}
- PHPBB3:
- Código:Selecionar conteúdo
.postprofile dt img:hover{
-webkit-transform: rotate(1800deg) scale(1);
-moz-transform: rotate(1800deg) scale(1);
-o-transform: rotate(1800deg) scale(1);
}
.postprofile dt img{
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
}
- PUNBB:
- Código:Selecionar conteúdo
div.user-basic-info a img:hover{
-webkit-transform: rotate(1800deg) scale(1);
-moz-transform: rotate(1800deg) scale(1);
-o-transform: rotate(1800deg) scale(1);
}
div.user-basic-info a img{
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
}
- INVISION:
- Código:Selecionar conteúdo
.postprofile dt img:hover{
-webkit-transform: rotate(1800deg) scale(1);
-moz-transform: rotate(1800deg) scale(1);
-o-transform: rotate(1800deg) scale(1);
}
.postprofile dt img{
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
}
3º - Resultado Final:
© Help Brasil e Marcos Augusto
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Efeito giratório no avatar |