CSS Dropshadow

Objectives

You will learn some basic CSS principles and in the end create an easy and efficient way to add dropshadows to every image you add into your website.

• Basic CSS usage
• Create a dropshadow image in Photoshop

Difficulty: Advanced

Alright so here is the idea, say you wanted to have an easy way to insert an image and make that image have a dropshadow. The image you see above was inserted with the following simple code:

Pretty easy, eh?

So to begin, open up your favorite image editor and create a transparent .gif dropshadow image (I use Photoshop throughout this tutorial).

In Photoshop first create a new image 80x80px with a transparent background. Then fill the top left corner with white

Apply the following settings:

And save the image for web (hotkey: ctrl+alt+shift+s) and

Tip: If you don't want to create the image yourself you can right click on the image below and choose 'save image as' then you can use that image to make 75x75 pixel images have dropshadows

save the image as a transparent gif, I saved it as 'dropshadow.gif'

Now you need to get an image that is 75x75 pixels, I used the following image from Halo

Now for the part you've all been waiting for, the CSS. The following is the code for the id 'Dropshadow'

Insert that CSS in an external Stylesheet or in your inpage stylesheet

Next your going to need to insert the HTML from above

To come out with: