HTML email drop-shadow

admin — Mon, 02 Apr 2012 10:50:47 +0000

Campaign Monitor wrote this article a few years back about nested tables in HTML emails and I thought to myself, wouldn’t this be useful for creating a drop-shadow effect? There are a couple of other ways to achieve this but I’ll explain why they aren’t such a good idea:

CSS3 – Probably the quickest way and the least amount of code, but this won’t work in all email clients.
images – This would look better but the file size would be larger and the images won’t expand when we add more content.

Demo

Below I’ll explain how to create drop-shadows that look something like this using only nested tables:

The first thing to think about is how wide you want it. In the example above, I’ve used a 4 width drop-shadow on each side. This means I’ll need to nest 4 tables.

When I’m building HTML emails I like to reset the border, padding and spacing for each table:

After that, each nested table will need to be 2 pixels smaller than its parent, aligned to the center and have a slightly darker background colour:

Once this has been repeated a few times you will start to see a gradient appear.

For the top and bottom it’s probably better to use images if you need it to work in lower versions of Lotus Notes. If not this is how to do it the nested way:

Add another table before the child table but this time add a table cell with a 1 pixel height and the same background colour. Do this for each nested table.

Luke Marsh

HTML email drop-shadow