[TUTORIAL] Efeito giratório no avatar

Ir para baixo

[TUTORIAL] Efeito giratório no avatar Empty [TUTORIAL] Efeito giratório no avatar

Mensagem por Lexus 02.08.12 19:20


[TUTORIAL] Efeito giratório no avatar Images_couleurs

Efeito 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.

[TUTORIAL] Efeito giratório no avatar Act_bottomAtenção, este efeito só funcionará em navegadores mais recentes.
--> Tutoriais, dicas e astúcias <--
Efeito giratório no avatar





- 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

(clique na imagem para aumentar)
[TUTORIAL] Efeito giratório no avatar 1114


- Códigos das respectivas versões
Aqui se encontram os códigos para cada versão de fórum disponível no Forumeiros:


  • PHPBB2:

      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:

      .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:

      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:

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





- Resultado Final:
(clique na imagem para aumentar)
[TUTORIAL] Efeito giratório no avatar RDsTJ




© Fórum dos Fóruns


[TUTORIAL] Efeito giratório no avatar Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
Efeito giratório no avatar
Lexus
Lexus
Hiper Membro

Membro desde : 22/06/2010
Mensagens : 4205
Pontos : 5693

http:///.../#

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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