CSS Dropshadow

CSS Dropshadow

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

This tutorial has been viewed: 2677 times

 

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:

<div id=”dropshadow”><img src=”head.gif”></div>

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 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

<div id=”dropshadow”><img src=”head.gif”></div>

To come out with:

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

Tags: ,

 
Added By:

No comments yet

 

Leave a Comment