Rank CSS e Rainbow.

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!

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.

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!

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!

Olá!

Que estranho, não funcionou

O código não esta adicionado na sua folha de estilo (ver) 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")!

Olá!

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

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

Olá!

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

Olá!

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

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

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?

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

Olá!

Não fez efeito, olhe lá.

Pedxz escreveu:O código não esta adicionado na sua folha de estilo (ver)

Mesma situação. O senhor salvou? Ou pode ser um problema do cache

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?

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

Olá!

Muito obrigado pela ajuda. Deus te abençoe.

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

Pode fechar!