August 01, 2004

I've been playing with using borders to frame the images I post. Having a border around an image captures the viewers eye holding it inside the image. HTML has an attribute "border" for images ( as in: <img ... border="2"/>.) The border is painted around the image in the current foreground color with no space between the border and the image. This may work for some but I wanted to give the eye a resting place around the photograph. The img tag also supports style and class/id attributes so we can apply styles to the image. Using CSS (Cascading Style Sheets) you can move the border away from the image.

I've started using this to manipulate the framing of my images. I've attempted to produce a border that has the feel of a Polaroid. There is something balanced about the white area around a Polaroid picture; more white area at the bottom with the other sides being close to equal.

To create the Polaroid effect you need to declare a style. The attribute inside the image tag looks like this:

<img … style="padding:15px 15px 55px 15px;border:1px solid #000;background:#FFF; />

Using CSS allows you more flexiblility in describing how you want an object presented. In this case we use padding to move the border away from the image. Padding always goes between a border and the object it is bordering thus the gap.

Typing this style command iinto every image would be a major pain in the keyboard. I've add a .polaroid class object to my style sheet:

.polaroid {
padding:15px 15px 55px 15px;
border:1px solid #000;
background:#FFF;
}


This allows me to assign .polaroid to any image I wish with minimum pain.

<img alt="DSC_2121.jpg" src="http://www.noded.com/archives/images/DSC_2121.jpg" width="350" height="365" class="polaroid" />

If I want to adjust the padding I change the style sheet once and all images calling .polaroid will display with the new settings.