Home arrow Style Sheets arrow 6 CSS3 Shadow Techniques Demonstrated
STYLE SHEETS

6 CSS3 Shadow Techniques Demonstrated


As you are probably aware, CSS3 includes a plethora of brand new properties that allow you to polish web page elements quickly and easily. Some of these properties -- such as "text-shadow" and "box-shadow" -- allow you to add a shading effect to your HTML elements, removing (at least partially) the need for background images. In this tutorial, we will demonstrate six methods to add shadows to your elements.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
February 28, 2011
TABLE OF CONTENTS:
  1. · 6 CSS3 Shadow Techniques Demonstrated
  2. · Method three: the text-shadow CSS3 property

print this article
SEARCH DEVARTICLES

6 CSS3 Shadow Techniques Demonstrated
(Page 1 of 2 )

As one might expect, most of these properties are ignored by Internet Explorer (although its version 9 might be a bit more generous). Other browsers, however, such as Firefox, Safari and Google Chrome, do understand them pretty well -- albeit with proprietary implementations. Despite this rather frustrating issue, it'd be quite educational to utilize the properties in question in the implementation of different methods that permit developers to decorate web page elements with slick and eye-catching shadows.

So, if you're interested in learning the details concerning the implementation of these methods, it's time to start reading. Let's jump in!

Method one: the enhanced "background" CSS3 property
 
The first method that I plan to implement to add a shadow effect to an HTML element is based on the functionality provided by the "background" property. As you'll probably recall, in its CSS2 incarnation the property accepts a single background image, which is quite limited. However, its CSS3 version has been greatly improved; it can assign up to eight images to the same element.

Taking this into account, adding a shadow to a selected HTML element is reduced to assigning a shadow image to each of its sides. This is exactly what the following code snippet does:
 
<!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 'background' CSS3 property</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
}
h2 {
    font-size: 3em;
    text-align: center;
}
.shadowed_box {
    width: 347px;
    height: 347px;
    padding: 20px;
    background: url(top_shadow.png) left top no-repeat, url(left_shadow.png) left 13px no-repeat, url(bottom_shadow.png) left bottom no-repeat, url(right_shadow.png) right 13px no-repeat;
    color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Example using the 'background' CSS3 property</h1>
    <div class="shadowed_box">
        <h2>Sample text</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 class="shadowed_box">
        <h2>Sample text</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 previous example, the shading effect has been added to a couple of divs. It was achieved by assigning the following images to the "background" property:


 
 and

Evidently, the method is quite self-explanatory. But for the sake of completeness, look at the following screen shot, which shows how the two divs are rendered on the browser:

That's pretty stylish, right? Having demonstrated the first shading method, it's time to implement the second one. As you'll see in a moment, this new method will use the "rgba()" CSS3 property to create the appropriate shadows.

To learn more about this approach, keep reading.

Method two: the "rgba" CSS3 property

The second shadowing method that I'm going to set up will make use of the "rgba()" CSS3 property. This property permits you to assign a foreground color to an HTML element, while at the same time, allows you to independently manipulate its alpha channel.

In case that you're not familiar with the inner workings of "rgba()", here's a brief explanation of how it works: the first three arguments assign the color (expressed in decimal values) to the RBG channels of the target element, while the fourth one sets its level of opacity (values from 0 to 1 are accepted).

Now, returning to the method, the next step is to create a document that contains a couple of absolutely positioned divs. The first element will be a wrapper for generic content, while the second one will act like its shadow. But, how will this be accomplished? Well, the latter will be positioned behind the former simply by manipulating its z-index property, thus rendering a pretty basic shading effect.

The following code fragment implements the method described above:

<!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 'rgba()' CSS3 property</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
.container {
    position: relative;
    font-size: 3em;
    color: #fff;
}
.box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 500px;
    height: 300px;
    padding: 20px;
    background: #C0C0ff;
    border: 1px solid #ccc;
    z-index: 9999;
}
.shadow {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 500px;
    height: 300px;
    padding: 20px;
    background: rgba(0,0,0,.4);
    z-index: 500;
}
</style>
</head>
<body>
<h1>Example using the 'rgba()' CSS3 property</h1>
    <div class="container">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non.</p>
        </div>
        <div class="shadow"></div>
    </div>
</body>
</html>

Although this method is relatively simple to implement, it generates an extremely basic shadow (not to mention the use of a pair of empty tags). Anyway, the result of this process can be seen in the following image:

At this point, I've developed two methods for adding shadows to an HTML element. Thus, it's time to implement the third one, which will rely on the functionality of the "text-shadow" CSS3 property to do its business.

To learn the full details of this brand new method, leap forward 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