CSS Scrollbar gradient corners

[Andreas]

Everyone knows Sublime Text and that’s because of its style. Well one of the things I’m trying to recreate of it, are the scrollbar’s corners. Does anyone know how to make a gradient like that in pure CSS?

The image might be hard to see, but if you got Sublime Text yourself, resize your window until you got both of the scrollbars and you’ll see what I mean.

[Paulie_D]

[Paulie_D]

http://codepen.io/Paulie-D/pen/zqtgB

?

[Andreas]

Those are regular border gradients, I’m looking on how to do the corners of the borders. See this post and check number 6.

[Paulie_D]

I guess I’m missing something…I don’t see any ‘corner’ in the picture you provided…just a bottom bar and a side bar above it on the right.

[Andreas]

Number six, where the scrollbars collide (the bottom right corner).

[Paulie_D]

What I’m saying is that I don’t see that type of corner in the first image you supplied.

[Paulie_D]

However, a linear gradient from top left to bottom right (perhaps with color stops) would seem to be the answer.

http://codepen.io/Paulie-D/pen/CcxLG

[Andreas]

Here is the image again, now I marked it with red.

[Paulie_D]

OK… That doesn’t look like No. 6 but fair enough.

I think what you are after might be an inset box shadow.

I’m on my phone right now but I will see what I can do later.

[Andreas]

I’m not trying to look it like number six, I’m referring to that box. Thanks.

[Paulie_D]

[Paulie_D]

http://codepen.io/Paulie-D/pen/ufcLD

[Andreas]

Is it possible without box-shadow, I’m doing this in Qt which is based off CSS2 and doesn’t support box shadow. Think of the corner as a 20×20 div.

[Paulie_D]

If it’s CSS2 then gradients are out too aren’t they?

.png bg image would be your best option then.

Frankly though, at 20px by 20px is anyone going to notice…let alone care about your attention to that much detail?

I doubt it.

[Author]

Posts