Oct 01 2015 0

Dropshadows for images

The following piece of CSS code adds a dropshadow to an image which looks similar to the shadow that gets added by the application MiniShadow (€ 1.99), using the shadow style Mini’. While I was on the road I became aware that I didn’t have a tool handy on my iPad to easily add these type of shadows to screenshots.

.dropshadow {
  box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
}

However this would add the dropshadow to every img element which is not what is required. So I used a bit of jQuery code the dropshadow will only be applied when the image filename ends with -ds for dropshadow (i.e. image1-ds.png or image2-ds.jpg).

$('img').each(function() {
    var filename = $(this).attr('src');
    var imgName = filename.substr(0, filename.lastIndexOf('.')) || filename;

    if ( imgName.substr(imgName.length - 3) == '-ds' ) {
        $(this).addClass('dropshadow');
    }
});

The results

An image not ending with -ds

Without dropshadows

and an image ending with -ds

With dropshadows

I have turned off the Backup option for images (Store a copy of each external image in your blog post and replace it with Blot’s copy) since this caused some strange CSS related issues.


Previous post
Blood Moon / Total Lunar Eclipse The moon on September 28 @ 2:42 am (f/5.6, exposure time 1/4 seconds) The moon on September 28 @ 4:29 am (f/5.6, exposure time 18 seconds). Sadly
Next post
Review: Plan V Somewhere in December of 2014 I pledged for the Kickstarter project Plan V. The following is an excerpt from the Flintu website, the creators of the
This blog is powered by Blot