: Blending a drop shadow seamlessly 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,
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 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.
More posts by @Hamm6457569
2 Comments
Sorted by latest first Latest Oldest Best
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.
A natural shadow would essentially be an extension of the orange border.
This is a quick mock up which needs further refinement:
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.