Home arrow Style Sheets arrow Rendering CSS Shadows: Reversing Shadows in Block-Level Elements
STYLE SHEETS

Rendering CSS Shadows: Reversing Shadows in Block-Level Elements


In this fifth part of the series, I show how easy it is to modify the orientation of a shadow added to a few divs. It requires the manipulation of a single argument taken by the “box-shadow” property. The entire styling process will be very easy to follow, so you shouldn’t have trouble replicating it when designing your own web pages.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
December 21, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows: Reversing Shadows in Block-Level Elements
  2. · Reversing the shadow of an HTML element

print this article
SEARCH DEVARTICLES

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

If you think that adding eye-catching shadows to the elements of your web pages is an annoying process that must always be accomplished by dropping a bunch of background images here and there, prepare to change your mind. We're going to look at the "duet" composed of "text-shadow" and "box-shadow," two brand new properties that come with the CSS3 specification. They will let you create all sorts of shading effects on your (X)HTML documents without dealing with heavy background graphics or coding a single line of JavaScript.

Naturally, if you've read previous installments of this series, it's very probable that you're familiar with using these properties. In those tutorials I developed some basic examples that showed how to take advantage of the functionality provided by "text-shadow" to add several types of shadows to the text of a given HTML element. To complement this hopefully didactic experience, I also demonstrated how to use the "box-shadow" property to perform a similar task with a few block-level elements.

In the last part I built an approachable example that showed how easy it is to create some shaded web page containers, thanks to the flexible model offered by the "text-shadow" property. In fact, the entire styling process was reduced to assigning the desired values to the shadow's top and left offsets, and then specifying its level of blur and foreground color. That was all it took.

It's valid to point out, however, that the versatility of "box-shadow" permits you to easily render different shading effects by minimally altering its arguments. To prove the veracity of my statement, in this fifth chapter of the series I'm going to create another basic example. It will utilize the property to decorate the aforementioned containers, but this time the orientation of the shadow will be partially reversed.

Want to learn the details of this process? Then start reading right now!

Review: adding shadows to block-level elements

Since my goal here is to demonstrate how simple it is to reverse the direction of the shadow added to the sample web page containers defined in the preceding tutorial, it'd be useful to take a quick a look at the example created then.

So here's the web page that uses the "box-shadow" property to display a soft gray shadow around the containers. Check it out:

<!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 'box-shadow' CSS3 property</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_container {
    padding: 15px;
    color: #000;
    background: #ffffe6;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 1px #808080;
    -moz-box-shadow: 3px 3px 1px #808080;
    -webkit-box-shadow: 3px 3px 1px #808080;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Example using the 'box-shadow' CSS3 property</h1>
        <h2>Header section</h2>
        <div class="shadowed_container">
            <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>
    <div id="content">
        <h2>Main content section</h2>
        <div class="shadowed_container">
            <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>
    <div id="footer">
        <h2>Footer section</h2>
        <div class="shadowed_container">
            <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>
</div>
</body>
</html>

Although the structure of the above web page is really basic, it's useful for showing the functionality that the "box-shadow" property hides beneath the hood. In this case, the property has been used to create three different shadowed containers, which when rendered on Firefox, Chrome or Safari, look similar to the ones depicted by the following image:

Definitely, you'll have to agree with me that using the "box-shadow" property to add some stylish shadows to block-level HTML elements is a straightforward process that can be mastered in a snap. In reality, the beauty of the property rests on its ability to pack in a remarkable amount of features, which can be accessed through a few intuitive arguments. It's really a shame that Microsoft hasn't bothered to add support for this and other properties included with CSS3. Will Internet Explorer 9 bring some hope of support in this area? Only time will tell.

This issue shouldn't prevent us from exploring other possible uses for the "box-shadow" property, right? In the next section I'm going to modify the definition of the earlier "shadowed_container" CSS class, which this time will apply a reversed shadow to the same HTML containers.

To see how this will be done, click on the link below and read the lines to come.    


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