box-shadow ‘problem’ – any ideas?

[atolborg]

Hi all!

With CSS3 we are now able to make round corners and box shadow, which is of course awesome!

During the last half year, multiple times I have experienced the problem which I would love your input on, here goes:

In the example below I am building a piece of content and positioning a comments link below (sorry about the danish language in image). Both the content div and the comments link have box-shadow: 0px 1px 2px #999;

In the first image, because the blur is greater than the ‘y’ attribute, a small line of shadow is displayed ‘between’ the two elements. This is not what we want!

In the second image, a rescue solution is used (the one I use now in the specific design). In my opinion it looks decent, but it was not what I set out to do.

With z-index manipulation:

Of course, the result I want is that the two elements blend nicely together and display as a single element. How would this be achieved with CSS? Which approach is the least ‘ugly’? Is it possible to hide the top overflow of the bottom element some how?

I have you have some great feedback!

Cheers

[noahgelman]

Oh geez, I actually ran into this issue several months ago. In my case the header has some box shadow and the drop down nav did as well so the shadows would blend together pretty much exactly how you’re trying to get yours now.

Unfortunately I couldn’t come up with an answer. I had to use a repeating image for the header for a fake box shadow and then used real box shadow on the drop down menu.

I wish there was a property that would cancel out the box shadow if 2 elements with box shadow touched.

I don’t know of any other solutions, sorry. But if someone else does I would love to hear it

[Author]

Posts