CSS Dropshadow

Jan 10, 2009 CSS

Use CSS to create a neat looking Drop Shadow on all of your Images.

This tutorial has been viewed: 791 times

Added By: Cybernetic Ninja Monkey

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

Final Result

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 80×80px 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 75×75 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 75×75 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’

#dropshadow{

background: url(‘dropshadow.gif’);

width: 80px;

height: 80px;

}

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:

I hope you enjoyed the Tutorial, post any questions you have in the Forums

Tags: CSS, photoshop

E-mail Comment Del.icio.us Digg Reddit Technorati Furl

This entry was posted on Saturday, January 10th, 2009 at 5:24 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.