Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I need to apply shadow to an overarching border, however so far I've created the shadow with CSS, and since the overarching border is formed by two boxes, the shadow overlaps.

My solution to this is to cover up the overlapping part with an image that looks like a seamless blend, however I'm not sure how the shadows should look, when they meet like that. Please see the blue circle area.

How would this part blend if it's a natural object? From an artistic standpoint?

How can I figure out how the natural shadow blend would look for an example like this?

I can use Adobe Photoshop or GIMP to achieve this.

share|improve this question
    
I like the idea of redesigning the structure, maybe two boxes for the side connected by a 3rd box for the top... I will see.. Thanks! –  eastboundr Jul 18 '13 at 16:46

2 Answers 2

up vote 2 down vote accepted

Here is my solution. I think it is the only way to do it in CSS and get clean seams between the drop-shadows. I used the blue transparent boxes because the issue you would have run into with the internal shadow method is that the corner seams/shadow curvature wouldn't have matched up where the green and black box meet.

enter image description here

share|improve this answer
    
Should have mentioned, you'll need to use z-index to layer all the divs in the correct order. –  John Jul 18 '13 at 18:10
    
Thanks John, this takes more work, but I believe this is actually going to work! Thanks! –  eastboundr Jul 22 '13 at 14:02

A natural shadow would essentially be an extension of the orange border.

This is a quick mock up which needs further refinement:

shadow

In terms of CSS, you'd need to extend the protruding box to cover the shadow on the lower element, then remove the inset shadow on the bottom edge of the protrusion.

share|improve this answer
    
Thanks for quick response. Well if we extend the protruding box with its shadow on the side, won't the shade on both sides still display a sharp contrast with the shadow of lower element? Since the shadow is going from dark to light sideways where as for lower element it goes top to bottom... –  eastboundr Jul 18 '13 at 16:44
    
Yup. Not sure you can pull this off with CSS3. But I'm no CSS3 box-shadow expert. –  Scott Jul 18 '13 at 16:47
    
put another div in there and use it to mask out the shadows. Just set the z-index and position it to extend lower than the box. I don't think this will give you a clean seam where the shadow meets in the corners however. –  John Jul 18 '13 at 17:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.