Image drop shadow

By Andrew on 20th August, 2008

Hi! Thanks for visiting. Here you can find blogging tips and free Wordpress themes. You may want to subscribe to RSS feed.

So you wanna have a drop shadow for all your images on your site/blog. You spend most of the time touch up all the images you have in Photoshop, create white padding area then drop shadow, save it, find it’s too big on your bandwidth consumption. Finally you give up on shadow make just one black border with CSS to save your bandwidth.

Here is the idea of having a drop-shadow-alike in CSS that only require one time editing. All image upload will have no border in Wordpress. It has an ugly-fugly link border in Internet Explorer by the way. Anyway, this is the normal one colored border in CSS

img {
border: 1px solid #000000;
}

Example:

As for shadow-alike you need to tweak them a little bit. Here is my way of doing a shadow-alike in CSS for images

img {
padding: 0px 1px 1px 1px;
background: #939393;
border: 1px solid #D4D4D4;
}

Example:

Background and border colors are very much depend on your preference though. However, this would help saving quite a lot of time on editing each and every images.

Similar entries

Tags: css, images border

Filed under TnT™, Web developing

About the author

A fresh graduate from a private design university in Malaysia. Still taking the time looking for a permanent job. Currently working on his web projects and contract with a small company.
See all posts by Andrew