Rainbow effect - CSS Dom 27 Abr 2014 - 15:03
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Change colors os groups namesAutor: Wagner
Funcionalidade: Todas as versões
Categoria: Recursos BestSkins
Olá,
Neste tutorial vamos aprender a fazer um efeito bem interessante aos grupos dos nossos fóruns.
Trata-se do seguinte, em um intervalo de 10 segundos a cor do nome de determinado grupo ou usuário irá alterar entre 5 cores pré-definidas (todos os valores podem ser alterados a gosto, isso que citei é o padrão que vou deixar no código).
[sucesso]Preview
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] [/sucesso]
O efeito é todo conseguido através do poder do CSS3, porém é necessário ter um navegador que de suporte a animações em CSS3, talvez seja preciso usar prefixos no seu código, vamos ver como usa-los mais a frente.
Código a ser usado:
Estilizando o código:
O código é bem simples de ser utilizado, onde está escrito
No
Configurando o código:
Essa parte é importante, atente-se a ela.
Primeiro precisamos decidir se vamos usar o efeito em usuários individualmente ou nos grupos do seu fórum.
Para usuário individualmente, usamos o seguinte código:
Para os grupos, precisamos analisar a estrutura de nossos fóruns, vou usar a versão PunBB como base.. Vejam:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Notem que a estrutura do nome do usuário é da seguinte maneira:
Se fosse apenas para o usuário, selecionamos o link (no código mostrado no passo anterior), mas como estamos estilizando os grupos, vamos mexer no
Onde você deve mudar o
Prefixos:
Usamos prefixos para navegadores que ainda não dão suporte aos códigos em seus códigos fonte, para que o código possa funcionar bem em todos os navegadores que suportam as animações CSS3...
Os prefixos que eu conheço são os seguintes:
Não vou dar o código pronto aqui, mas prefixos seriam usados assim:
Na animação:
E por ai vai...
E no seletor:
E por ai vai...
Espero que gostem, e que seja útil...
Referências para entender melhor os efeitos
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Última edição por Wagner em Dom 27 Abr 2014 - 18:15, editado 2 vez(es)
