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.