Home arrow Style Sheets arrow Rendering CSS Shadows: Changing Shadow Positions in Block-Level Elements
STYLE SHEETS

Rendering CSS Shadows: Changing Shadow Positions in Block-Level Elements


In this penultimate part of the series, I demonstrate how easy it is to add a different shading effect to some containers on a web page. We simply alter two arguments of the “box-shadow” property at the same time -- in this case, the ones responsible for controlling the horizontal and vertical offsets of the rendered shadow.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 1
December 27, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows: Changing Shadow Positions in Block-Level Elements
  2. · Altering the shadow’s offsets at the same time

print this article
SEARCH DEVARTICLES

Rendering CSS Shadows: Changing Shadow Positions in Block-Level Elements
(Page 1 of 2 )

Regardless of the incompatibilities that still exist between most browser vendors, the truth is that the incorporation of shading effects into elements on a web page has never been easier. The CSS3 specification includes a couple of complementary properties, called “text-shadow” and “box-shadow,” which permit you to accomplish this task without having to appeal to heavyweight background images or dig into the rather complex terrain of client-side scripting.

In an attempt to demonstrate the functionality offered by these properties, in earlier chapters of this series I developed some basic examples. They showed how to add different kinds of shadows, first to the text wrapped by a few H2 headers, and then to some trivial divs. In both cases, the entire decoration process was limited to invoking each property with the appropriate arguments and nothing else. It was that easy, really..

What’s more, the model provided by the properties is so flexible that they make it possible to create an impressive variety of shading effects by introducing small modifications in their incoming arguments. This can be particularly useful when using the “box-shadow” property, since it allows you to render all sorts of shadowed containers. In fact, in the last installment I created an example that reversed the shadow applied to the aforementioned divs by altering only the property’s horizontal offset.

Logically, it’s feasible to take this process one step further and generate additional shading effects by altering the property’s top and left offsets at the same time. That sounds pretty interesting, doesn’t it? Given that, in this penultimate episode of the series I’m going to demonstrate how to achieve this, as usual through a fully-functional example, which you’ll be able to test and tweak at will.

Now, it’s time to leave the preliminaries behind and continue learning how to create shadowed web page elements with CSS. Let’s go!

Review: reversing the shadow of a block-level element

As I just explained in the introduction, the “block-shadow” property makes it really simple to generate an entirely different effect by changing the values assigned individually to each of its parameters. If you find this concept somewhat confusing, examine the following code sample. It changes the direction of the shadow applied to some divs by specifying a negative value to the property’s horizontal offset: 

<!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 (reversing 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_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 it’s tricky to get the concept right away, the “box-shadow” property behaves pretty similar to the option found in most image editing programs, where it’s possible to drop a shadow on an element and change its settings with sliders and buttons. In the example above, the “slider” that controls the horizontal offset of the shadow has been moved to the left of its central position, thus generating a negative value. This simple change in a single argument of the property produces the following result:    

There you have it. As the previous image shows, reversing the orientation of the shadow applied to an HTML element (or many of them) is an extremely simple process that can be grasped very quickly. Moreover, if the manipulation of only one parameter generates such as interesting output, what can be achieved when tweaking two of them at the same time?

That's a good question, indeed. But to answer it in a pragmatic way, in the coming segment I’m going to modify the previous example, which this time will simultaneously alter the horizontal and vertical offsets of the shadow applied to the target divs.

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


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