Use a duplicate image to drop a shadow
An alternative for 'box-shadow' on images
Depending on your design, sometimes it is nice to drop a shadow on an image to highlight it:
1 | <img src="my-image.jpg" /> |
1 | img { |
But … it looks like a paper print of the image, with a light bulb in the first third above it. The shade is grey, boring and has been used and seen many times before…
An design related Instagram post from Muhammad Abdull of thewilsonthings, inspired me to use the image itself as the shadow in order to make the image look a bit translucent. Should be the same technique as that of a reflection. Here is the HTML/CSS code for it, as the people asking for it in the comments.
What we want to achieve is this:
Basically, we use a duplicate of the image and position it below the actual image, but slightly offset and blurred. It won’t be a performance issue, as some might think, because it is the very same file and will be loaded only once by the browser.
For showing two images in the nearly same place in different layers, we need a wrapper…
1 | <div class="image-wrapper"> |
… and some CSS for positioning the images on top of each other first. Here are the defaults for both image
elements:
1 | div.image-wrapper { |
Now we have to style the duplicate image that it looks similar to the shadow. We washing it out using the blur filter and the opacity.
1 | div.image-wrapper img.shadow { |
Last step is to change the duplicates dimensions and the positioning below the original image. We squeeze it by 10% and shift it from left with half of the value back to the center, shift it from top to make it standout at the bottom and send it to the back by taking a lower z-index than the original image.
1 | div.image-wrapper img.shadow { |
Thats it. Here’s a pen to play around with the solution:
You can interact with this article (applause, criticism, whatever) by mention it in one of your posts, 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