Home arrow Style Sheets arrow Rendering CSS Shadows: Decorating Block-Level Elements
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
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
December 20, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows: Decorating Block-Level Elements
  2. · Adding a shadow to a block-level element with the box-shadow property

print this article
SEARCH DEVARTICLES

Rendering CSS Shadows: Decorating Block-Level Elements
(Page 1 of 2 )

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.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials