A short tutorial showing how to apply drop shadows to images on your site with CSS.

Table of contents

What we want to achieve

Images are everywhere on the web, but rarely is any design love given to them. Most often they are slapped in the page. One technique you can use to give them some style is to apply a drop shadow.

Here’s an image of what we are going to get to:

Can’t wait for the explanation? Go to the example, see it in action and get the source code

Keeping it flexible

To make our code as flexible as possible we want to use CSS to apply drop shadows to our images rather than make them with drop shadows via Photoshop. That way when the designs need to change we just change the CSS file. Then you can demand a pay rise for the money you have saved!

Making the drop shadow

Open up Photoshop and create a new document that is 20 pixels wider and higher than your image. My image is 230 x 170 so I create a new document that is 250 x 190.

If you don’t have rulers visible go to View > Rulers. Then put one ruler at 240 on the horizontal axis and the other at 180. Then using the rectangle tool (shortcut U) draw a white rectangle inside the ruler lines you have just created. Then go to the layers tab and on the layer you have just drawn right click and choose Blending Options. Add a drop shadow with whatever colour you like. Mine is #999999.

At the end of this your image should look like this:

Save this out as a .png and preserve transparency and then a gif too. I’ve called mine drop_border.png and drop_border.gif. More on this later.

The CSS

For the CSS we are going to create a div and use the image we have just created as a background image. I’m going to give it a class name of drop-shadow. I’m using a class rather than an id as we may wish to use it more than once on a page.

You will note that the div is being floated right and we have given it a margin too. This is so text will wrap nicely around it. The background image is of course the one we just created. Next comes the image itself:

To PNG or not to PNG

I mentioned I would come back to the background image and why we save it as both a .png and a .gif. Internet Explorer 6 and below sadly do not support alpha transparencies. This is the nice see through bit on the drop shadow and why we use a .png file. You might decide to not save your drop shadow as a png but I choose to use a conditional stylesheet to give IE6 and below the dog food it deserves.

Make sure this comes after your main style sheet so it will override it in the cascade.

That’s all there is to it

You can get the source code or see the example in action. There are probably many other ways to use drop shadows but this works for me. It is cross-browser friendly and works in the following browsers:

Windows

Firefox 1+

IE 5+

Opera 7+

Netscape 6+

Mac

Safari 2.0

Firefox 1+

IE 5.2

Camino 1+

CSS3 will make this all much easier with border-image but for now we will have to wait…

Tags

Recent Posts

Using HashiCorp Vault with LDAPHow to use HashiCorp Vault to setup an LDAP backed secret store with read-only access for users in groups and read-write access for specific users

Linux and Unix xargs command tutorial with examplesTutorial on using xargs, a UNIX and Linux command for building and executing command lines from standard input. Examples of cutting by character, byte position, cutting based on delimiter and how to modify the output delimiter.

Copy a file in GoHow to copy a file in Go. The ioutil package does not offer a shorthand way of copying a file. Instead the os package should be used.

About the author

George Ornbo is a hacker, futurist, blogger and Dad based in Buckinghamshire, England.