5

So I'm in a tricky situation: I have outer div wrapper that contains an inner div and a ul like so:

<div id="wrapper">
    <div id="box"></div>
    <ul id="list">...</ul>
</div>

The #list has to be absolutely positioned to be right underneath #box yet not move it and other elements around the page as it appears and disappears.

Since it's positioned absolutely, if I add a border around #wrapper, it only goes around #box. box-shadow of course acts the same. Problem is, I need a shadow that goes around both elements together seamlessly.

The three solutions I've come across while searching google/stackoverflow are:

  1. Give both elements their own shadow and then use -webkit-clip-path to get rid of the top shadow on #list, making it look like one shadow going around the group. While this works, the part where the shadows meet has a weird clippy-looking effect. So this method works, but it doesn't look good. Link to answer describing solution.

  2. Use a spread equal to the negative of the blur and then use 3 shadows, one for each side of #list. Good in theory, but in practice the shadows on the sides now don't go along the full length. Link to answer describing solution. Here's a jsfiddle of me trying it out.

  3. Use a :before or :after pseudo element to cover up the overlapping shadow. This works extremely well for similarly-colored boxes, but my ul and div have content in them that can't afford to be covered! Link to answer describing solution

I'm left in a bit of a jam, as I would really like a shadow around #box and #list together, but can't seem to find a solution that works for my particular case. Any suggestions would be extremely helpful!

Note: I'm actually using the Electron framework, so the solution must work on Chrome, but it only has to work on Chrome!

Community
  • 1
  • 1
rcplusplus
  • 2,767
  • 5
  • 29
  • 43
  • [This is a great answer with example](http://stackoverflow.com/a/19866131/5601989) – James Brown Jul 12 '16 at 23:43
  • @JamesBrown problem is, I _need_ `#list` to be absolutely positioned. If it weren't, when it reappears, it would push everything around. I want to appear as a popup over everything else without changing the flow. Unfortunately, this prevents `#wrapper` from actually wrapping it making this non-trivial, but I'm hoping there's some awesome CSS hack some guru out there will bestow that will help :) – rcplusplus Jul 13 '16 at 00:12
  • This is a case where an image would actually be really helpful. It sounds very possible - so maybe I'm missing something. It all depends on the items the layout - the shadow color - the things underneath etc.- and how it transitions. – sheriffderek Jul 13 '16 at 02:55

1 Answers1

8

You can use css-filter:

#box {
  filter: drop-shadow(0 0 5px black)
}
Yukulélé
  • 15,644
  • 10
  • 70
  • 94