1

Tenho uma lista ul / li e quero definir sombra para criar um efeito de gradiente quando li tiver ativo e com hover.

Esse é o código que cria a borda, a idéia é inserir mais 5px como sombra para criar o efeito.

ul.navmenu-nav>li>a:hover,
ul.navmenu-nav>li.active>a,
ul.navmenu-nav>li>a:focus {
   padding-left:15px;
   border-left: 5px solid #2E2F44;
   text-decoration: none;
   background-color: #ffffff;
}

1 Resposta 1

1

Se eu entendo bem com linear-gradiente vc consegue fazer esse efeito.

Eu fiz o efeito degrade com 10px de largura, mas vc consegue controlar esse tamanho nos valores de inicio e fim do gradiente, deixem um comentário no código, nele sua cor começa no 0px e vai fazendo o gradiente até os 10px.

ul.navmenu-nav>li>a:hover,
ul.navmenu-nav>li.active>a,
ul.navmenu-nav>li>a:focus {
   padding-left:15px;
   border-left: 5px solid #2E2F44;
   text-decoration: none;
   background-color: #ffffff;
   background-image: linear-gradient(to right, #2E2F44 0px, transparent 10px, transparent 10px); /* o gradiente começa no 0px e vai até o 10px começa na sua cor e termina transparente */
}
ul li {
  list-style: none;
}
<ul class="navmenu-nav">
    <li class="active">
        <a href="">Item 1</a>
    </li>
    <li>
        <a href="">Item 2</a>
    </li>
    <li>
        <a href="">Item 3</a>
    </li>
</ul>

2
  • Hugo, funcionou perfeitamente..
    – RRV
    Commented 26/05/2018 às 12:05
  • @RRV bom demais então, com linear-gradiente da pra fazer muita coisa legal depois da uma lida sobre essa propriedade. []'s
    – hugocsl
    Commented 26/05/2018 às 12:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .