Como adicionar um efeito ao nome do gradiente com animação Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Como adicionar um efeito ao nome do gradiente com animação

4 participantes

Ir para baixo

Tópico resolvido Como adicionar um efeito ao nome do gradiente com animação

Mensagem por LucianoMicle 06.06.21 18:37

Detalhes da questão


Endereço do fórum: https://luciano.foroactivo.com/
Versão do fórum: phpBB3

Descrição


Olá amigos!
Estive olhando os fóruns neste fórum e vi que os nomes de alguns administradores têm uma animação gradiente da qual gosto muito, com cores que mudam com a animação.
-
Se alguém tiver o tópico para que eu possa ver o tutorial, eu agradeço Coração

Saudações, Luciano
LucianoMicle
LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por Don Corleone 06.06.21 18:49

Onde você viu tal efeito?
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por LucianoMicle 06.06.21 19:04

LucianoMicle
LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por tikky 07.06.21 19:14

Olá @LucianoMicle,

Skull_MasteR escreveu:Então meu jovem, não tem mistério. Acabei de testar no meu Fórum, e sim, dá certo.

Só que o código CSS no qual nosso amigo Chagas citou, só aplica o efeito nos Usuários, portanto fiz uma modificação para que funcione nos grupos também.

Efeito nos Usuários:
Código:
a[href^="/u"] span[style*="#FF0004"] {
    background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
    -webkit-background-clip: text;
    background-size: 1800% 1800%;
    -webkit-text-fill-color: transparent;
    animation: rainbow 3s ease infinite;
}
 
@keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}
}

Em:
a[href^="/u"] span[style*="#FF0004"]
Apenas troque o "#FF0004" para a cor do seu grupo.

OBS: Isso serve para o código que irei falar abaixo:


Efeito nos Grupos:
Código:
a[href^="/g1-"],
a[href^="/u"] span[style*="#FF0004"] {
    background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff);
    -webkit-background-clip: text;
    background-size: 1800% 1800%;
    -webkit-text-fill-color: transparent;
    animation: rainbow 3s ease infinite;
}
 
@keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;}
}
Em:
a[href^="/g1-"],
Troque o "g1" para o ID do seu Grupo, no qual deseja aplicar o efeito.

Prints de quê funciona: Print 1Print 2Print 3 e Print 4.

Caso queira, veja-o como ficou o meu fórum com este efeito.

Atenciosamente,
Skull_MasteR


Atenciosamente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por LucianoMicle 07.06.21 20:51

Oi! Eu trabalho corretamente, mas quero colocar o elemento e não funciona ..

Código:
font-weight: 700;
LucianoMicle
LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por tikky 07.06.21 21:07

LucianoMicle escreveu:Oi! Eu trabalho corretamente, mas quero colocar o elemento e não funciona ..

Código:
font-weight: 700;
O senhor pode o usar o seguinte:
Código:
a[href^="/u"] strong {
 font-weight: 700;
}
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por LucianoMicle 07.06.21 21:45

Olá amigo!

Ainda não funciona.
LucianoMicle
LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por tikky 08.06.21 20:48

LucianoMicle escreveu:mas quero colocar o elemento

O senhor quer "colocar o elemento" onde?! Veja que qualquer membro de um grupo já tem o bold no nome de usuário Pensativo
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por LucianoMicle 08.06.21 23:47

Sim!
Quero deixar os nomes de usuário um pouco mais ousados. Mas não posso fazer isso com meu conhecimento de css, e eles não funcionaram quando tentei modificar.
LucianoMicle
LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por Don Corleone 09.06.21 0:19

@LucianoMicle Creio que você está errado, pois o elemento que deseja colocar com o bold já está dentro das tags strong, ou seja, já possuem o efeito de negrito no nome. que no caso seria o font-weight: 700;.
Don Corleone
Don Corleone
Super Membro

Membro desde : 06/08/2012
Mensagens : 1259
Pontos : 2032

http://somosmugiwara.forumeiros.com https://www.facebook.com/kadandajr https://twitter.com/SomosMugiwara

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por LucianoMicle 09.06.21 2:15

Ok...
Qualquer problema que eu tiver no futuro, vou reabrir um tópico, saudações e obrigado!
LucianoMicle
LucianoMicle
****

Membro desde : 07/09/2019
Mensagens : 239
Pontos : 357

https://divtes.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Tópico resolvido Re: Como adicionar um efeito ao nome do gradiente com animação

Mensagem por Shek 09.06.21 17:34

Tópico resolvido


Movido para "Questões resolvidas".
Shek
Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

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