Efeito hover nas categorias

3 participantes

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

Tópico resolvido Efeito hover nas categorias

Mensagem por PrisoN†BreaK 03.03.17 17:18

Detalhes da questão


Endereço do fórum: http://lscwsamp.forumeiros.com/
Versão do fórum: PunBB

Descrição


Gostaria desse efeito na categoria

https://imgur.com/a/f09HQ

Quando você passa o mouse em cima da categoria ele, fica com a cor toda, e quando o mouse não tá, ele só fica com a cor na ponta esquerda.

Fórum onde vi: http://www.brasilplaystart.com.br/forum/ .
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por Shek 05.03.17 14:43

Boa tarde.

Acesse Visualização >> Cores >> Folha de estilos CSS e personalize este código:
.forum-category .title {
background: #1a1a1a url("IMAGE") repeat 0%;
transition: all .5s ease-in-out;
}

.forum-category .title:hover {
box-shadow: 500px 0px 0px HEXADECIMAL inset;
transition: all .5s ease-in-out;
}
Troque o valor em Vermelho pela URL da imagem padrão, que no caso daquele fórum é uma imagem em degradê começando por um verde indo até o preto. Em seguida, troque o Laranja pelo Hexadecimal da cor da imagem escolhida.

Até mais.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 18896
Pontos : 22793

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

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK 05.03.17 16:17

Resultou, teria como coloca este efeito nas estáticas tbm?
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK 07.03.17 13:04

PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por Kyo Panda 07.03.17 13:16

Tente trocar por:

Código:
.forum-category .title,
.content-block .title {
  background: #1a1a1a url("IMAGE") repeat 0%;
  transition: all .5s ease-in-out;
}

.forum-category .title:hover,
.content-block .title:hover {
  box-shadow: 500px 0px 0px HEXADECIMAL inset;
  transition: all .5s ease-in-out;
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK 07.03.17 15:25

Resultou, agora só uma dúvida, tem como fazer em fez de por a imagem, coloca uma cor, para que quando eu mudasse a cor do fórum pelo seletor de cor, ele mudasse automaticamente também?
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por Kyo Panda 09.03.17 13:40

Troque o CSS por esse:

Código:
.title, .title > * {
    position: relative;
    overflow: hidden;
}

.title:before {
    content: " ";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(45deg, rgba(136,191,232,0) 0%, #222 40%, #222 100%);
    transition: .5s ease-out transform;
}

.title:hover:before {
    transform: translate(100%);
}
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por PrisoN†BreaK 09.03.17 20:43

Ótimo, resolvido <3
PrisoN†BreaK

PrisoN†BreaK
Super Membro

Membro desde : 23/10/2015
Mensagens : 1243
Pontos : 1753

http://brasilplayfreedomofc.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Efeito hover nas categorias

Mensagem por Kyo Panda 10.03.17 15:09

Efeito hover nas categorias Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda

Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

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