1

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.

Improve this question
1
  • 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, 2013 at 16:46

2 Answers 2

Reset to default
2

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

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

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.

Improve this answer
3
  • 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, 2013 at 16:44
  • Yup. Not sure you can pull this off with CSS3. But I'm no CSS3 box-shadow expert.
    – Scott
    Jul 18, 2013 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, 2013 at 17:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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