Automatic Duplicate Image Shadow
Drop an image shadow with the image itself via JavaScript
At the beginning of the year I wrote a post about showing a shadow on an image with the image itself instead of using box-shadow
, to make the image appear glass-like.
Nice trick, but it would be much easier to have a little script, that does this automatically for all images on a page. In this post I will show you how to achieve this.
The script is not really rocket science: We just have to surround an image tag….
1 | <img src="my-image.jpg" /> |
… with a wrapper, which holds the original image and a blurred duplicate of it:
1 | <div class="shadow-wrapper"> |
The rest will be done by CSS:
1 | div.shadow-wrapper { /* Wrapper */ |
To make long story short: The wrapper is positioned relative
and both images absolute
. The shadow image is 10% smaller than the original, blurred by 10 pixels and lies beneath the original one, slightly shifted down by 15%.
Very important is to give the wrapper a bottom margin, otherwise the shadow will be rendered to tight to other elements, what looks not good.
The Script
What the script should do:
- Take any image tag with a particular class name (here
drop-shadow
) - Create a new wrapper with all classes the image tag has
- Size the wrapper as the image
- Place the image tag inside the wrapper
- Clone the image tag and append it to the wrapper also
- Replace the image tag with the new wrapper HTML
1 | document.querySelectorAll("img.drop-shadow").forEach(function(item) { |
The result in comparison with no shadow and the default box-shadow
:
Happy shadowing…
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts or by replying to its syndication on Twitter, which will also be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
Webmentions
No Webmentions yet...
In case your blog software can't send Webmentions, you can use this form to submit me a mention of this article...
Comments