Colorful Twig
JavaScript

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.

Image Shadow

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
2
3
4
<div class="shadow-wrapper">
  <img class="drop-shadow" src="my-image.jpg" />
  <img class="shadow" src="my-image.jpg" />
</div>

The rest will be done by CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div.shadow-wrapper { /* Wrapper */
    position: relative;
    margin-bottom: 30px;
}
div.shadow-wrapper img.drop-shadow { /* Original image */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    margin: 0;
    float: none;
}
div.shadow-wrapper img.shadow { /* Shadow image */ 
    position: absolute;
    width: 90%;
    left: 5%;
    top: 15%;
    z-index: 0;
    filter: blur(10px);
    opacity: 0.8;
    margin: 0;
    float: none;
}

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
document.querySelectorAll("img.drop-shadow").forEach(function(item) {

  let wrapper = document.createElement("div");
  wrapper.classList.add("shadow-wrapper");

  item.classList.forEach(function(c) {
    if (c != "drop-shadow") wrapper.classList.add(c);
  });
  wrapper.style.width = item.clientWidth + "px";
  wrapper.style.height = item.clientHeight + "px";

  wrapper.insertAdjacentHTML("beforeend", item.outerHTML);

  let shadow = item.cloneNode();
  shadow.classList.remove("drop-shadow");
  shadow.classList.add("shadow");
  wrapper.insertAdjacentHTML("beforeend", shadow.outerHTML);

  item.outerHTML = wrapper.outerHTML;
}

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 , 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

Related