Fake CSS Inset (from above and below) With Adjacent Divs

Question

I have three divs and want to "fake" an inset by casting shadows from outside (1px divs) into the larger middle div.

I don't care if we use z-index or not (they could be floated) whatever you think is the best way to solve it.

<div style="position:relative;z-index:101;width:500px;height:1px;box-shadow:0 25px 15px -20px #555;"></div>

<div style="position:relative;z-index:100;width:500px;height:100px;overflow:hidden;">I want a "fake" shadow inset to spill into here from the  adjacent divs.</div>

<div style="position:relative;z-index:101;width:500px;height:1px;box-shadow:0 -25px 15px -20px #555;"></div>

Why aren't the shadows showing?

The end result should "look" like this:

<div style="box-shadow:inset 0 25px 15px -20px #555, inset 0 -25px 15px -20px #555;width:500px;height:100px;overflow:hidden;">I want a "fake" shadow inset to spill into here from the  adjacent divs.</div>

However, I want the "fake inset" solution with the three divs.

If you still don't understand. The top and bottom divs should cast their shadows into the middle div, so that the result looks like the middle div has two inset shadows.

I could explain why I want to do it this way, but I'd rather keep the question simple.

I dont understand how exactly you want. So can u create an image which can explain better? — G.L.P, Mar 10 '15 at 05:58
I made the dimensions smaller so it's easier to see, just click "Run code snippet." — PJ Brunet, Mar 10 '15 at 06:09

PJ Brunet · Answer 1 · 2015-03-10T06:43:18.753

0

The solution was to make the adjacent divs taller and adjust the shadow numbers.

<div style="width:500px;height:30px;box-shadow:0 15px 18px -12px #111;"></div>

<div style="width:500px;height:100px;">I want a "fake" shadow inset to spill into here from the  adjacent divs.</div>

<div style="width:500px;height:30px;box-shadow:0 -15px 18px -12px #111;"></div>

edited Mar 10 '15 at 06:43

answered Mar 10 '15 at 06:34

PJ Brunet

3,615
40
37

I found another solution that used :before and :after tags which should effectively accomplish the same thing (more elegantly) but I don't have time to post that solution. The reasoning for this: the middle div has a clickable image map, which complicates adding the shadow directly, if you want to maintain compatibility with IE10. – PJ Brunet Mar 10 '15 at 21:43

Fake CSS Inset (from above and below) With Adjacent Divs

1 Answers1