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, which will be shown here as a Webmention ... or you leave a good old comment with your GitHub account.
In case your blog software can't send Webmentions, you can use this form:
Webmentions
No Webmentions yet...
Comments