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

4 participantes

Ver o tópico anterior Ver o tópico seguinte 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
Nível 8

Masculino
Inscrito dia : 07/09/2019
Mensagens : 112
Pontos ativos : 169

http://lucianomicle.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 Connor R. 06.06.21 18:49

Onde você viu tal efeito?
Connor R.

Connor R.
Membro do fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

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
Nível 8

Masculino
Inscrito dia : 07/09/2019
Mensagens : 112
Pontos ativos : 169

http://lucianomicle.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

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

Mensagem por pedxz 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.


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6420
Pontos ativos : 7579

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
Nível 8

Masculino
Inscrito dia : 07/09/2019
Mensagens : 112
Pontos ativos : 169

http://lucianomicle.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

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

Mensagem por pedxz 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;
}


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6420
Pontos ativos : 7579

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
Nível 8

Masculino
Inscrito dia : 07/09/2019
Mensagens : 112
Pontos ativos : 169

http://lucianomicle.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Admineiro

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

Mensagem por pedxz 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


Boas-vindas ao Fórum dos Fóruns!
Leia as regras do Fórum dos Fóruns e as regras do setor de suporte.
Antes de criar um tópico, verifique se sua questão já não foi respondida.
Se sua questão foi resolvida, marque-a editando a sua primeira postagem.
Pedxz - Admineiro
pedxz

pedxz
Admineiro
Admineiro

Inscrito dia : 13/01/2017
Mensagens : 6420
Pontos ativos : 7579

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
Nível 8

Masculino
Inscrito dia : 07/09/2019
Mensagens : 112
Pontos ativos : 169

http://lucianomicle.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 Connor R. 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;.
Connor R.

Connor R.
Membro do fórum

Masculino
Inscrito dia : 06/08/2012
Mensagens : 1212
Pontos ativos : 1955

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
Nível 8

Masculino
Inscrito dia : 07/09/2019
Mensagens : 112
Pontos ativos : 169

http://lucianomicle.foroactivo.com/ https://www.facebook.com/facebook.com/lucianomicleok https://twitter.com/twitter.com/lucianomicleok

Ir para o topo Ir para baixo

Membro profissional

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
Membro profissional
Membro profissional

Masculino
Inscrito dia : 11/04/2009
Mensagens : 18650
Pontos ativos : 22478

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

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo


Permissão neste fórum:
Você não pode responder aos tópicos