CSS3 - Floated images with captions and shadows

I am floating all the pictures to the right, just for fun. You can easily change that. All the pictures have the caption neatly underneath, set in a smaller font and in italics.

The first is an image without borders. To see the CSS and markup, view the source code.

Then, picture two has a thin black border (you can alter the thickness and color easily). In my opinion, this makes the picture stand out a little, and is prettier. But this, of course, is a matter of taste.

In my opinion a little shadow makes it stand out even more. So in the third example, the same picture has been given a discrete little box shadow effect. This effect is part of the CSS3 specification and supported by most browsers (but not IE 8 and earlier). It has the same border color and thickness. If you don't see the shadow, you're using the wrong browser.

In the fourth (and final) example I use slightly thicker shadow with twice as much blur.

And that's it! Go ahead and use the code (view page source with your browser) if you like it. Link to me if you feel like it - it's appreciated!

Back to the post at nekkidblogger.com