CODEWITHSUNDEEP
javascripthtmlcss
Sergei Basharov
Sergei Basharov

Reputation: 53850

How to make text gradiently shade at the end of a scrolling area?

I have a horizontally scrollable area. As you can see, there are white-to-transparent gradient rectangles on the left and on the right of the area on top of the scrollable content. What I am trying to do is to make scrollable items fade when they are near the left or the right end - now it looks more or less acceptable. The issue is with the semi-transparent background of the scroller container, you can see yellow map below. If there was an opaque background, it would be easy to implement. But as I have it semi-transparent, I need a solution how to make these rectangles fit the color around it somehow so that white rectangles wouldn't be that prominent.

Is there a right elegant way to do this without much hacking?

Scrollable area with shades at its ends

Upvotes: 0

Views: 93

Answers (1)

Jason Sperske
Jason Sperske

Reputation: 30426

There is a non standard CSS property (that works in Chrome and Safari at the moment called -webkit-background-clip (demo) that works like this:

.masked{
  background: url(/bgclip/img/paint.png) repeat, white;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

The Can I use page suggests that it has broad support, but the value you want text seems web kit specific.

Upvotes: 1

Related Questions