CSS frames around your online images

I am preparing a post (check back later) on how to matte and frame your pictures for maximum impact and the realized I might just as well explain how to create the fake mattes and frames I put around some images on this blog. The link to my smugmug page for example on the right has one of those. They are very easy to make. So here goes.

First you need to call your image as follows for example:

<img width="200" height="300" style="border:1px solid white;padding:0px" src="http://lagemaatphoto.smugmug.com/photos/224751707-S.jpg" />

This results in your image with a thin white line, creating the reveal you would get from a beveled mat cut:



Than you throw a span tag around it:

<span style="float:left;margin:10px;padding:25px;border:10px solid black;background:#707070;">Image tag here</span>

The 10 pixels of black make the frame and the 25 point padding makes the grey mat. The color of which is determined by the background tag.

The complete code for this would be:

<a href="http://lagemaatphoto.smugmug.com/gallery/3681960#248829578"><span style="float:left;margin:10px;padding:25px;border:10px solid black;background:#707070;"><img width="200" height="300" style="border:1px solid white;padding:0px" src="http://lagemaatphoto.smugmug.com/photos/224751707-S.jpg" /></span><div style="clear: both;"></div></a>

As you can see, I usually put a <div style="clear: both;"></div> tag around the result and enclose it in a link to the website where the image can be seen larger. You can probably do the same thing with nested spans, but for some reason, browsers put a grey stripe at the bottom if you do that.