CSS 3 border shadow.

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

CSS 3 border shadow.

Post by JellyFish »

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?
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS 3 border shadow.

Post by kaszu »

Instead of border-image in your example I would use box-shadow with a little hack:

Code: Select all

#top {
    width: 100%;
    padding: 0 50px;
    left: -50px;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Re: CSS 3 border shadow.

Post by JellyFish »

This was what I was originally doing actually. However I was trying to figure out a way that didn't involve a hack.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: CSS 3 border shadow.

Post by kaszu »

Only other solution I can think of is "pointer-events: none;" with your original code, but that works only in FF at the moment.
Post Reply