CODEWITHSUNDEEP
htmlcssreactjs
David
David

Reputation: 341

Scroll navigation bar transparent on the right side?

I am attaching a picture below. Basically, there is a navigation bar with list items. Overflow-y is scroll as you can see, we can scroll to the right (and then left). I would like to make only the right side transparent before scrolling, just like in the picture. And then when I get to the end, only the left side should be transparent. Is this somehow possible in CSS? I am using ReactJS for this website (mobile-first approach as seen in the picture), so if I need to use React here instead of CSS, that's okay too. Waiting for the kind replies, thanks for the help!

Upvotes: 1

Views: 1011

Answers (2)

Hamza Arab
Hamza Arab

Reputation: 152

Use overflow: hidden and :pseudo elements on the navigation bar to create a gradient

nav {
    overflow: hidden;
    max-width: 200px;
    position: relative;
    white-space: nowrap;
    background: #FFF;
    box-shadow: 1px 1px 2px #ccc;
}
nav::after {
    content: '';
    position: absolute;
    left: 200px;
    margin-left: -20px;
    width: 20px;
    height: 100%;
    top: 0;
    background: linear-gradient(to right, rgba(240, 244, 245, 0), rgba(240, 244, 245, 1));
}

nav a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  color: #333;
}
<nav>
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
</nav>

Upvotes: 1

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15851

You can take advantage of some almost new CSS feature as clipping/masking:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

If you can add any code we could be more precise.

Upvotes: 1

Related Questions