Drop shadows with css

Tweet No Comments  Email

By: web design tutorial | posted in HTML/CSS, Tutorials, Web Design |
Date: August 23rd, 2009

Drop shadows are a great and easy way to add some depth on your images. Especially you can add drop shadows with css, which you don’t have to spend time adding any drop shadows using Photoshop and export them out as .jpg. If you don’t like your drop shadows or for some reason want to remove them, you can easily use css to remove the drop shadows or modify it to your liking with only one css file.

Here are other useful css drop shadows tutorials you might want to check them out.
Drop Shadows with CSS

/>
Drop Shadows II – CSS
More Drop Shadows Test

In this article we will use other techniques. A lot of techniques out there uses negative margin, while this version is really simple and uses relative positioning and with some other variations.

Here are some examples:

Here’s the CSS:

div.shadow{float: left;padding: 0 6px 6px 0; background: url(dropshadow.png) no-repeat bottom right}
div.shadow img{display: block;position: relative; top: -3px;left:-3px;padding:5px;background:#FFF; border:1px solid;border-color: #ccc #666 #666 #ccc}

This technique has been tested on Opera 7.6, Firefox, IE5, IE5.5 and IE6 and Safari.

Have fun!

By: web design tutorial X E-mail:
getitright@hotmail.com
Info:
Posts by the author (29)
Site:
Info: