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.
Quite similar to what you can do when using Photoshop or any other popular image editing application, the “text-shadow” property allows you to easily control the amount of blur applied to the shadow of an HTML element’s text. If this concept is properly translated to the example shown in the previous segment, the already familiar “shadowed_text” CSS class could be redefined in the following way:
.shadowed_text {
padding: 20px;
color: #fff;
background: #e0e0e0;
text-shadow: 1px 1px 3px #000;
}
As you can see from the above code snippet, the shadow applied to each target element has been blurred with a value of 3px. This seemingly insignificant change allows to create slightly softer shadows, which are a bit more realistic and pleasant to the human eye.
For obvious reasons, the best way to see the actual impact that the amended version of the “shadowed_text” CSS class produces is to include it in the corresponding web page. Since this is what I plan to do below, just keep reading.
The CSS styles in action
Do you want to see how the target H2 elements look after assigning to them the modified “shadowed_text” CSS class? Well, focus your attention on the following web page, which hopefully will be pretty explanatory:
<!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 blur of 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_text {
padding: 20px;
color: #fff;
background: #e0e0e0;
text-shadow: 1px 1px 3px #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>
Effectively, each H2 header included in each section of the above web page has been assigned the aforementioned CSS class. This styling process not surprisingly decorates the headers in question with a blurred shadow whose appearance is similar to the one shown below:
Well, you’ll have to admit that when compared to other shading effects created previously, the one above looks much more polished and professional. Since this additional “touch” was achieved simply by manipulating a single argument of the “text-shadow” property, the result is quite remarkable.
Of course, the property provides enough versatility for adding all sorts of appealing effects to the text of web page elements, so feel free to tweak its arguments and see what results you get in each case.
Final thoughts
In this third part of the series, I went through the development of another basic example, which showed how simple it is to a add blurred shadow to the text wrapped by multiple H2 headers, thanks to the flexibility offered by the “text-shadow” property. You should notice, though, that the property can only be used with the text wrapped by HTML elements, and not with the elements themselves.
Put in a clearer way, does this imply that isn’t possible to drop shadows on block-level elements like divs, lists and so forth? Fear not; the CSS3 specification comes equipped with another property, called “box-shadow,” which allows you to add shadows to block containers, including the ones just mentioned.
If the topic has already piqued your curiosity, in the following tutorial I’m going to demonstrate how to work with this brand new property, as usual through an easy-to-follow example.
Don’t miss the next part!