STYLE SHEETS

Rendering CSS Shadows: Decorating Block-Level Elements

In this fourth part of the series, I introduce the “box-shadow” CSS3 property. This property allows you to add attractive shadows to block-level elements on a web page, pretty similar to what you can achieve with “text-shadow.”

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 20, 2010

TABLE OF CONTENTS:

Among the variety of brand new properties that have been included with the CSS3 specification, there are a couple that you will find especially useful, due to their remarkable functionality and flat learning curve. I'm talking about the tandem composed of “text-shadow” and “box-shadow,” two powerful properties that will let you add all kinds of eye-catching shadows to your web pages' elements, without having to appeal to background images or deal with the inherent complexities of JavaScript.

Naturally, it's not all a bed of roses when using these properties in production environments, since at the moment they’re not fully supported by some major browsers (such as Internet Explorer). It’s possible, however, to give the properties a try and see if they’re as functional as they seem. With that idea in mind, in earlier chapters of this series I developed a few trivial examples that demonstrated how to add several shading effects to the text of some sample H2 elements by using the “text-shadow” property. In each case, the entire styling process was reduced to tweaking the property’s arguments and nothing else. It was that easy.

While decorating chunks of text with subtle shadows is pretty useful, what happens if you need to do something similar with a block-level container? Well, it seems that the people behind the W3 Consortium have asked themselves the same question. They created the complementary “box-shadow” property, which performs exactly this task, as easily as its “text-shadow” counterpart.

Assuming that you’re interested in learning how to work with the “box-shadow” property, in this fourth part of the series I’m going to take a close look at it, so that you can start using it when defining the visual presentation of your HTML elements.

Ready to begin? Then let’s get going!

Review: adding a blurred shadow to the text of an HTML element with the “text-shadow” property

If you missed the last installment of this series, where I explained how to use the “text-shadow” property to add a blurred shadow to all the H2 elements of a basic web page, below you'll find the source code corresponding to this example. Take a look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example using the 'text-shadow' CSS3 property (altering the blur of the shadow)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.9em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
#header, #content, #footer {
    padding: 20px;
}
.shadowed_text {
    padding: 20px;
    color: #fff;
    background: #e0e0e0;
    text-shadow: 1px 1px 3px #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Example using the 'text-shadow' CSS3 property</h1>
        <h2 class="shadowed_text">Header section</h2>
        <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.</p>
    </div>
    <div id="content">
        <h2 class="shadowed_text">Main content section</h2>
        <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.</p>
    </div>
    <div id="footer">
        <h2 class="shadowed_text">Footer section</h2>
        <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.</p>
    </div>
</div>
</body>
</html>

As you can see from the above code fragment, the blurred shading effect applied to each heading element of the previous web page has been created simply by assigning a value of 3px to the third argument taken by the “text-shadow” property. Remember that this one controls the amount of blur of the rendered shadow. Int this case, it produces the following output:

Well, it’s not my intention here to say that “text-shadow” will let you create the kinds of sophisticated effects that can be achieved with Photoshop, but the property does a remarkable job, considering that its whole behavior is controlled through four simple parameters.

And now that you understand the underlying logic of the earlier example, it’s time to explore another handy option that CSS3 puts at your disposal for rendering shadows on web pages. In the next section I'm going to introduce you to using the brand new “box-shadow” property, which lets you drop shadows on block-level HTML elements.

To learn more about working with this property, click on the link that appears below and keep reading.

Next: Adding a shadow to a block-level element with the box-shadow property >>