Instead of using box-shadow, I've been using border-image and linear gradients to create a bottom shadow for this control bar. The reason I'm not just using box-shadow is because box shadow has slight roundedness on the corners.
Here's the link.
There is only one thing missing. It's not invisible to mouse events. When you mouse over the top arrow of the scroll bar, for example. I don't want this. So how can I fix this?
I think the answer lies with border-image-outset and border-image-width. But either I have no idea what I'm doing when using them or webkit doesn't support those properties.
Anyone have any ideas?
CSS 3 border shadow.
Moderator: General Moderators
Re: CSS 3 border shadow.
Instead of border-image in your example I would use box-shadow with a little hack:
width 100% and padding will increase box width to 100% + 100px so now shadows will not be rounded (not in visible area) and since you have overflow: hidden; on body this will work fine.
Tried within Inspector and it worked.
Code: Select all
#top {
width: 100%;
padding: 0 50px;
left: -50px;
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}Tried within Inspector and it worked.
Re: CSS 3 border shadow.
This was what I was originally doing actually. However I was trying to figure out a way that didn't involve a hack.
Re: CSS 3 border shadow.
Only other solution I can think of is "pointer-events: none;" with your original code, but that works only in FF at the moment.