How do I apply box shadow to adjacent elements without the appearance of overlapping?

Up vote 1 down vote favorite share g+ share fb share tw.

UPDATE @TristarWebDesign's solution worked perfectly: html css css3 box-shadow link|improve this question edited May 18 '11 at 14:05 asked May 18 '11 at 13:29brentmc7938828.

– Andrew Jackman May 18 '11 at 13:34 @Sydenam: I guess the former. He just wants the shadow at the top of le login a element to disappear. That could be feasible by adjusting the box-shadow: attribute's value but I don't think it's very clean to do it this way... – p4bl0 May 18 '11 at 13:39.

Try something like this - HTML Login CSS #admin_login form { background: #464950; padding: 5px; box-shadow: #000 2px 2px 10px; border-bottom-right-radius: 10px; margin-bottom:3px; } #admin_login input { display: block; border: none; margin: 6px 4px; padding: 4px; } #admin_login a { color: inherit; background: #464950; padding: 4px 8px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: #000 2px 2px 10px; text-decoration: none; } #admin_login . Login-btn { height: 30px; margin: -3px 0 0 -4px; overflow: hidden; padding: 0 0 0 4px; } Basically just wrapping the link inside a div, setting the div to overflow hidden, and position it in the correct place. You'll also need to make sure the link is on a layer above the form.

The best solution I've found for this problem is just covering the shadow with a pseudo element... #admin_login a:after { /*make #admin_login a position relative*/ content: ''; position: absolute; top: -10px; left: 0; height: 10px; background: #464950; width: 120%; } Browsers that support box shadow also support :after, so you're in the clear. Here is a working example: jsfiddle.net/pWD2S.

Ooh, that’s really clever. I guess you still get a little shadow overlap, but I bet no-one notices it. – Paul D.

Waite May 18 '11 at 13:42 Nice! I had to tweak it a little bit and its not a 100% perfect fix, but its good enough. Thanks.

– brentmc79 May 18 '11 at 13:55 There is no shadow overlap is you position the pseudo-element correctly. Check out the jsfiddle (updated). – Duopixel May 18 '11 at 13:56 If what you are covering isn't a solid colour, then my method of hiding the overlapping shadow below may be a better option working example: jsfiddle.net/93FXK – Tristar Web Design May 18 '11 at 13:56.

Unfortunately I don't think this is possible. If there was a css property along the lines of box-shadow-top/right/bottom/left then you may have had a chance. The easiest way to achieve this is to create the background as a transparent PNG including the drop shadow, and apply it as a background to the containing div.

Yeah, I had a feeling that might be the case, but I was really hoping to avoid a background image. – brentmc79 May 18 '11 at 13:46.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.