Rank CSS e Rainbow.

2 participantes

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

Tópico resolvido Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 3:33

Detalhes da questão


Endereço do fórum: https://dichblet.forumeiros.com/
Versão do fórum: ModernBB

Descrição


Olá!

Gostaria de saber se tem como ter um rank igual ao desse GIF:

https://imgur.com/gallery/JKqocaG

Dá para perceber que é CSS e tem uns efeitos Rainbow porém não consigo arranjar um modo de fazer ele.

Se for preciso, basta acessar o site https://policiarcc.com/forum e procurar por um usuário que tenha um nome com efeito Rainbow.

Aguardo respostas!
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 10:25

Olá @-Xerox-,

Adicione na sua folha de estilo o seguinte código:
Código:
.rank {
 color: #fff;
 font-size: 13px;
 font-weight: 600;
 height: 36px;
 width: 160px;
 margin: 5px auto;
 border-radius: 12px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14), inset 0 0 1px 1px rgba(0, 0, 0, .1);
 text-align: center;
 line-height: 33px;
 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.rank.admin {
 background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
 background-size: 1800% 1800%;
 -webkit-animation: rainbow 18s ease infinite;
 -z-animation: rainbow 18s ease infinite;
 -o-animation: rainbow 18s ease infinite;
 animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}

@-moz-keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}

@-o-keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}

@keyframes rainbow {
 0% {
 background-position: 0% 82%
 }
 50% {
 background-position: 100% 19%
 }
 100% {
 background-position: 0% 82%
 }
}
Ao criar o rank em Painel de controle > Usuários e grupos > Ranks > Administração dos ranks ponha na opção "Título do Rank"
Código:
<div class="rank admin">Administrador</div>

Aguardarei uma resposta sua, caso tenha dúvidas!
Atenciosamente,
pedxz.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 11:46

Olá!

Agradeço pela ajuda e esforço. Funcionou, mas tem como ao invés de ser em um rank ser em um grupo e em seus usuários esse efeito?

Aguardo respostas! Tchau
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 11:58

Use o seguinte código:
Código:
a[href^="/u"] span[style$="#000000"] strong {
   background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-size: 1800% 1800%;
   -webkit-animation: rainbow 18s ease infinite;
   -z-animation: rainbow 18s ease infinite;
   -o-animation: rainbow 18s ease infinite;
   animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}

@-moz-keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}

@-o-keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}

@keyframes rainbow {
   0% {
      background-position: 0% 82%
   }
   50% {
      background-position: 100% 19%
   }
   100% {
      background-position: 0% 82%
   }
}
Localize #000000 e mude para a cor do grupo que o senhor deseja adicionar o efeito!
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 12:21

Olá!

Que estranho, não funcionou Chorando ou muito tr

-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 13:06

O código não esta adicionado na sua folha de estilo (ver) Envergonhado O código é totalmente funcional, basta alterar a cor do grupo para a pretendida e ter a opção "Melhorar seu CSS" desativada ("Não")!
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 14:05

Olá!

Eu fiz o que você pediu mas mesmo assim não funcionou.
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 14:14

O senhor tem alguma conta teste para poder ver qual é o problema com o fórum, agradecia!
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 14:47

Olá!

-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 14:56

Acabei de testar no seu fórum e funcionou, use:
Código:
a[href^="/u"] span[style$="#00B0F0"] strong {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:03

Olá!

Funcionou, porém o ícone não foi.
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 15:07

Peço perdão! Altere para:
Código:
a[href^="/u1"] span[style$="#00B0F0"] strong, a[href^="/u1"] span[style$="#00B0F0"]::before {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:10

Olá!

Mais uma pergunta, na parte que for olhar o perfil o efeito não aparece no nome. Como se ele não existisse sabe?
Tem como fazer com que ele apareça no perfil também?
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 15:16

Adicione na sua folha de estilo, o seguinte código:
Código:
div#cp-main h1 span[style$="#00B0F0"] strong, div#cp-main h1 span[style$="#00B0F0"]:before, div#profile-advanced-right .h3 span[style$="#00B0F0"] strong, #profile-advanced-right .h3 span[style$="#00B0F0"]:before {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:20

Olá!

Não fez efeito, olhe lá.
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 15:25

Pedxz escreveu:O código não esta adicionado na sua folha de estilo (ver) Envergonhado
Mesma situação. O senhor salvou? Ou pode ser um problema do cache Envergonhado
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:34

Olá!

Peço perdão, acho que não salvei rsrs.

Mais duas perguntas se não se importa.

Tem como fazer o efeito com o grupo?

E tem como colocar um ícone da font awesome no rank?
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por tikky 08.02.20 15:39

Para adicionar o ícone ao rank basta adicionar a classe, exemplo:
Código:
<div class="rank admin"><i class="fa fa-archive"></i> Administrador</div>

O Efeito para o grupo é:
Código:
a[href^="/g1-"] {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -z-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por -Xerox- 08.02.20 15:56

Olá!

Muito obrigado pela ajuda. Deus te abençoe.

Poderia me ajudar com a outra questão se não se importa?

Pode fechar!
-Xerox-

-Xerox-
****

Membro desde : 08/11/2019
Mensagens : 289
Pontos : 438

https://portalcrnblet.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Rank CSS e Rainbow.

Mensagem por Convidado 08.02.20 15:58

Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
Anonymous

Convidado
Convidado


Ir para o topo Ir para baixo

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

- Tópicos semelhantes

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