ObjectivesYou 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
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
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’
Insert that CSS in an external Stylesheet or in your inpage stylesheetNext 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