CSS demos

Dropshadows

Created by surrounding the frog-image with a div that's styled with the shadow image as a background. (The shadow image is large enough to be reuseable with much bigger blocks.) The frog is then given negative margins to nudge it over from its shadow. A relative position is also applied, which is needed to get IE to play ball.

A similar effect with a div is shown below; it's surrounded with a div that has the shadow image as a background. However, the negative margins won't work in IE here, oddly - relative positions are used to nudge the image up and left from the shadow.

Of course, there's even more jiggery-pokery required to account for Internet Explorer; IE won't display alpha-channel transparency in .PNG images, so the shadow loses its soft edge. Instead an !Important rule is used to hide the .png (IE will ignore it) and feed IE a .gif.

This, unfortunately, means that the .gif will need to be recreated to match a change in background colour. Bah.

This stuff is explained in much more detail on AListApart.