STYLE SHEETS

Decorating Images with CSS

If you want a web site with images that make it stand out from the crowd, keep reading. This three-part article series will show you how to give your images a professional look without resorting to Photoshop. All you'll need is some basic CSS. In this first part, you'll learn how to use slim borders and padding to achieve a picture frame effect.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

January 07, 2010

TABLE OF CONTENTS:

If you found it easy to grasp how to use borders and padding for improving the look of an inline image, then understanding the driving logic of the next CSS technique will be a breeze, indeed. As I expressed in the previous section, it’s possible to add a background color to the image being styled, in addition to the assigned borders and padding. This process displays a fancy CSS-based frame.

To understand more clearly how this decorative approach works, I suggest you look at the following code fragment, which uses this technique with the pair of images that you saw before:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Decorative images using CSS</title>

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

img {

float: left;

padding: 20px;

margin-right: 30px;

background: #e0e0e0;

border: 1px solid #808080;

}

h3 {

color: #808080;

}

#wrapper {

width: 960px;

margin: 0 auto;

}

#header, #content, #footer {

padding: 30px;

}

#section_container {

margin-bottom: 50px;

}

</style>

</head>

<body>

<h1>Decorative images using CSS</h1>

<h2>Header section</h2>

</div>

<h2>Main content section</h2>

<h3>First example of decorative image using CSS</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

</div>

<h3>Second example of decorative image using CSS</h3>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

As you can see in the above example, a smooth gray background color has been added to the sample images, together with the same slim borders and padding values. This process produces the following output:

Not too bad, right? Considering that this “framed” effect on the images has been achieved by combining only three basic CSS properties -- “border,” “padding” and “background” -- the final result is quite acceptable. Of course, this technique will fall short if you're building websites that have a more artistic look; in those cases, eye-catching background images are a key part of the whole design process. However, for websites that present a minimalist design, this approach may work very well.

Final thoughts

In this introductory chapter of the series, I showed how easy it is to improve the appearance of a few inline images by means of the “border” and “padding” CSS properties. In the examples that you saw before, the clever use of these properties made the images look more polished and elegant, without the need to use a bunch of heavy background pictures.

In the course of the next episode, I’ll be showing you how to add a neat shadow effect to the previous sample images, by using a simple combination of padding and an extra background graphic.

Here’s my final suggestion: don’t miss the next part!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.