Set shadow to create gradient effect

Question

Set shadow to create gradient effect

Navigation

#1 by (1 votes)

1

I have an ul / li list and want to set shadow to create a gradient effect when li is active and hover.

This is the code that creates the border, the idea is to insert more 5px as a shadow to create the effect.

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

css

asked by anonymous 26.05.2018 / 04:59

1 answer

How do I create a "+" button that adds new fields to my form Forcing divs with text to remain on the same line?

score 1 · Accepted Answer

If I understand well with linear gradient you can do this effect.

I made the effect degrade with 10px wide, but you can control this size in the start and end values of the gradient, leave a comment in the code, it starts its color at 0px and it makes the gradient up to 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>