In this third part of the series, I show how to add a blurred shadow to the text wrapped by multiple H2 headers, thanks to the flexibility offered by the “text-shadow” property. You will notice, though, that the property can only be used with the text wrapped by HTML elements, and not with the elements themselves.
Aside from including an engaging set of behavioral properties like the powerful “transform” (which I covered in an earlier series here at the Developer Shed network), the CSS3 specification comes bundled with several others. They can be of great help when adding some “classic” effects to elements of a web page without having to rely on background images or write additional JavaScript snippets. That’s exactly the case with the tandem composed of “text-shadow” and box-shadow.” This pair of properties allow you to add all sorts of appealing shadows to one or multiple HTML elements by means of some easily configurable arguments, which resemble those found in any graphic editing application (such as Photoshop).
To illustrate how handy and flexible they can be, in the last installment of this series I developed a basic example that took advantage of the functionality provided by the “text-shadow” property to decorate the text of some H2 elements with a subtle dark shadow. This styling process only required that we alter the values assigned to the property’s top and left offsets, which in this case were increased to make the text stand out from the rest of the containing web page.
Although it’s valid to notice that the clever manipulation of the mentioned offsets can yield quite impressive results, in most cases they’ll look rather rough and unfinished if the blur of the rendered shadow isn’t controlled appropriately. This time luck is on our side, as the “text-shadow” property takes a third parameter which can be used for specifying the amount of blur that will be applied to a dropped shadow.
To demonstrate how to use this argument in a concrete case, in this third part of the series I’m going to build another approachable example. It will show how to add a slightly blurred shadow to all of the H2 elements of the sample web page defined in the preceding tutorial.
Ready to learn how this will be carried out? Then begin reading!
Review: altering the “text-shadow” property’s top and left offsets
As usual, before I start demonstrating how to apply a blurred shading effect to the H2 headers mentioned in the introduction, I’d like to spend a few moments reintroducing the example developed in the last installment, which showed how easy it is to alter the horizontal and vertical offsets of the “text-shadow property” and display an outset-like text on screen.
With that being said, here’s the example that performs this task:
<!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 left and top offsets)</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: 2px 2px 1px #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>
Since the structure of the above web page is extremely trivial, the only thing worth noticing here is that the values assigned to the top and left offsets corresponding to the shadow of the target H2 elements are 2px respectively. Although subtle, these displacements produce an engaging shading effect which is depicted by the following screen capture. Check it out:
That looks pretty stylish, doesn’t it? Here, it’s clear to see that small changes applied to the arguments provided by the “text-shadow” property permit us to generate a plethora of different shadow effects. But as you’ll surely recall, it’s also possible to render a softer shadow simply by altering the amount of blur applied to it. To prove that this can be accomplished in a snap, in the following segment I’m going to modify the example that you saw before, which this time will render a slightly blurred shadow around the text of the same H2 elements.
To learn the full details of this process, jump forward and read the lines to come.
Style Sheets 
More of the Top CSS3 Tutorials for Shadows
