In this second part of a three-part series, I implement a simple CSS approach that enhances the appearance of a given image by assigning to it an additional background graphic. The purpose in this case is to add a soft shadow to the targeted image. It's quite possible, however, to use the same technique to achieve more creative results.
Using a CSS Shading Effect to Decorate Images (Page 1 of 4 )
Providing images on a web page with an appealing appearance can be a challenging, even frustrating experience. This is because of their intrinsic nature: after all, images need to be displayed in a great variety of contexts that range from mere decorative purposes to using them with a real semantic meaning within the structural markup of the page.
This rather ambiguous scenario makes styling images a process that must be constantly balanced between two well-differentiated endpoints: the first one is a a plain situation where images are reduced to their most minimalist expression, while the second one overloads the same images are overloaded with visual and heavy effects that are completely pointless.
Of course, deciding which path to travel depends on several factors, such as the kind of audience to which the images will be targeted, or in what environment the images will be shown. Regardless of this dilemma, the concrete implementation of decorative techniques on bitmapped graphics can be reduced to two general categories: first, images that are styled using pure CSS elements, including borders, padding and background colors; and second, images that are decorated utilizing other images, which can lead to quite impressive results at the expense of triggering additional HTTP requests.
To demonstrate how easy it is to implement the first decorative approach, in the article that precedes this one I showed how to improve the look and feel of a sample picture by adding to it first a slim border, then a small amount of padding, and finally a soft gray background color, thus giving the image an elegant ”framed” effect.
As I explained before, though, it’s also possible to polish the visual presentation of an image by means of another graphic, even though this may sound confusing initially. As you might have guessed, achieving this requires a clever use of the “padding” and “background-image” CSS properties; therefore, in this second part of the series I’m going to discuss how to use this technique for adding a subtle shadow to the same example image used in the previous tutorial.
Are you ready to continue learning how to use the functionality of CSS to decorate HTML images in a few simple steps? Then jump in and begin reading!
Style Sheets 
HTML5 Boilerplate Introduction
