Creating Framed Pictures with CSS

Being the most powerful and effective web-based visual presentation tool developed so far, it's not breaking news that style sheets can be used in all sorts of clever ways. These range from polishing the appearance of a great diversity of HTML elements, to performing a few more innovative tasks, such as modifying the behavior of selectors, a feature not surprisingly called behavioral CSS.

When analyzed as a whole, style sheets are quite impressive. However, one of the best things about them is that they can produce remarkable results even when you use only basic properties. That's exactly the case when styling inline images, as the proper combination of borders, padding and background pictures can give boring <img> elements an elegant and eye-catching appearance, thus making them look much more professional.

To demonstrate how easy it is to improve the look and feel of one (or many) HTML images, in the two previous articles of the series I built a pair of basic examples. The first one showed how to decorate a sample graphic by using a mix of thin borders, padding and a solid background color. On the other hand, the second example was slightly more complex; it performed the entire decorative process by assigning a background picture to the targeted image to produce a shadowed version of the image.

This last approach is particularly interesting. It permits you to produce different versions of the same base image with relative ease, which makes it suitable for implementing in a large number of projects. Considering the inherent flexibility of this decorative technique, in this last installment of the series I'm going to discuss how to use it to create a pretty realistic frame around an image, an effect that can be applied to other images with minor effort.

Ready to learn the full details of this styling process? Then, jump in and start reading!