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:

It’s hard to believe, but the clever use of some well-known CSS properties, such as “border” and “padding,” can give a boring image like the one shown in the preceding segment a more appealing and elegant appearance. Of course, this is merely dull theory, so it’s time to modify the previous web page using the mentioned properties to improve the look and feel of its images. Here it is:

<!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: 10px;

margin-right: 30px;

border: 1px solid #585858;

}

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>

At first sight, it seems that the enhanced version of this web page shows nothing particularly special, but this is a mistaken impression, believe me. If you focus your attention on the CSS block that defines the page’s visual presentation, you’ll see that the inline images have been assigned a border of 1px together with an overall padding of 20px. While using these properties with several CSS selectors is a trivial process for any web designer, the results produced in this case are pretty interesting.

Still not convinced? Well, the following screen shot should help to change your mind quickly. Take a look at it, please:

There you have it. This simple, not to say simplistic CSS technique, which uses a combination of borders and padding has improved considerably the overall appearance of the previous sample images. Quite possibly, the major advantage in using this approach is that it doesn’t require any additional background graphics, thus making the web page load faster as well.

Now that you surely grasped the driving logic of the earlier example, it’s time to move on and continue exploring the functionality of CSS to improve the look of inline images. In the next section I’m going to create yet another example, which will also use decorative borders and padding, but in conjunction with a background color, thus creating the illusion of a framed image.

To learn more about this example, now jump forward and read the lines to come.

Next: Adding a background color >>