CSS3 – Floated images with captions and shadows

by Peter on September 17, 2010

Stockholm, Sweden

1. Stockholm, Sweden

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 in the demo. Here’s the basic CSS-code for the floated image with caption:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

div.imgcapture {
  float: right; clear:right;
  width: 257px;
  margin: 5px 0 5px 15px;
}
div.imgcapture p {
  padding:0; margin: 3px 0 0 0;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
Stockholm, Sweden

2. Stockholm, Sweden

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. Here’s the CSS for that:

1
2
3
4
5

img.fixed {
  border:1px solid black;
  width: 250px; }
Stockholm, Sweden

3. Stockholm, Sweden

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.

Here’s the code:

1
2
3
4
5
6
7
8
9
10
11

img.fixed2 {
  border:1px solid black;
  width: 250px;
  box-shadow: 3px 3px 3px #818181;
  -webkit-box-shadow: 3px 3px 3px #818181;
  -moz-box-shadow: 3px 3px 3px #818181; }

The “box-shadow” property is defined by 3 lengths and a color as attributes. The first length is the horizontal offset of the shadow, (positive means the shadow is on the right, a negative offset will put the shadow on the left of the box). The second is
the vertical offset; a negative value means the box-shadow will be on top of the box and a positive means the shadow will be below the box. Finally, the third number is the blur radius. If this is set to 0 the shadow will be sharp; the higher the number, the more blurred it will be.

Stockholm, Sweden

4. Stockholm, Sweden

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

And that’s it! Go ahead and use the code if you like it. The full code, including markup, can be found in the demo. Link to me if you feel like it – it’s appreciated!

And, seriously – if you can’t see the shadows, it’s time to get rid of IE and get a browser that shows you the net in all it’s glory! Here’s the download sites for Opera, Chrome, Firefox (a tad buggy for the moment) and Safari (unfortunately wants to grab you email address).

Related Posts:

Tagged as: , , , , ,