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.
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:
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.
Style Sheets 
and 
