0

I'm trying to create an effect that shows a div sort-of disappearing into the content background. The idea is that there is a simple border: 1px #000 solid; on the top and bottom of the div, then a large inset shadow on the left and right to give the appearance that the div continues back behind the page, as if there is a slit in the background which the div can travel through.

Box-shaodw currently only work on all sides at once. So I need a way to get a large shadow on the left and right, but still be able to access the content beneath the shadow. That's the glory of css shadows, you can. An image simply will not work because then you wouldn't be able to click under it.

Someone on this post suggested using border-image and putting a css3 gradient into it. It's hurting my brain, I start to get very confused when trying to place a css3 gradient into the border on one side of a div.

Can anyone help?

Here's the page, in case you'd want to take a look. I'm trying to make do this on the image slider.

http://designsweeter.com/

alt
  • 13,357
  • 19
  • 80
  • 120
  • «An image simply will not work because then you wouldn't be able to click under it.» Actually, you can. `.passthrough { pointer-events: none; }` – Andrea Lazzarotto Apr 18 '16 at 19:52

3 Answers3

3

You can have multiple box-shadows, comma separated. I guess it's easy for you to figure it out from here, if not I can elaborate.

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
  • I don't think you understand what I'm trying to do. Read more. – alt Jun 22 '11 at 20:43
  • 1
    Is it a matter of me not understanding the question, or you not understanding the answer? (which makes sense, given how short it was) So here is a quick example: http://jsfiddle.net/leaverou/mtDYp/ You could also use CSS3 gradients instead. – Lea Verou Jun 24 '11 at 01:03
1

Take a look at the solution proposed here. They fake a gradient with several border colors, you could use rgba() for those to simulate transparency.

You won't be able to have a clean cross browser implementation as Firefox 5 still needs an actual url() parameter for the border image attribute.

Your best shot would be to use CSS masks (Webkit only)

Community
  • 1
  • 1
Jj.
  • 3,160
  • 25
  • 31
  • OUch, really. One is only supported in firefox, the other is only in chrome and safari? – alt Jun 22 '11 at 04:17
  • With the webkit masks I would make a square image in photoshop the size of the div, put the shadows on each end, then apply the mask to the div so that it would overlay on top, but functionality would be retained beneath? – alt Jun 22 '11 at 04:22
  • Your solution works, but only in two browsers. Thank you so much, I learned about webkit mask, it's amazing, easy and looks great. I'll have to go with the
    hiding method for now.
     – alt Jun 22 '11 at 05:07
  • Unless there was a way to use rgba with firefox border colors... :/ – alt Jun 22 '11 at 05:11
1

Here I tried styling surrounding elements to drop the shadow over the content. It's not pretty and hard to scale but I think it looks like what you describe.

It uses w dives on the sides to add the lateral shadows, and an extra div at the bottom to cover the lower shadow of the divs.

Jj.
  • 3,160
  • 25
  • 31