Although the creation of shadowed elements on web pages is a fairly simple process, it usually demands the use of background images or even the implementation of an additional JavaScript layer that can add shadows to the target selectors on the fly.
While these approaches will function properly in most modern browsers, many web designers are reluctant to use them due to the extra work that they require. However, not all is gloomy when it comes to embedding shaded elements into an (X)HTML document. The CSS3 specification includes two handy properties, called “text-shadow” and “box-shadow,” which permit you to perform this task without appealing to background graphics or using a single pinch of JavaScript.
What’s more, if you've already read the previous part of this series, you already have some idea of how to use the “text-shadow” property to add some stylish shadows to the text wrapped by a web page element. In that installment, I explained how to apply this effect to some H2 headers included in a trivial (X)HTML document.
Of course, not all browser vendors have added support for the pertinent properties (hello Microsoft); hopefully, they will in the near future. We shouldn't treat this fact as an obstacle to exploring the functionality that these new properties bring to the table. In line with this concept, in this second episode of the series I’m going to develop another approachable example. It will demonstrate how easy it is to render different types of shadows by altering only the vertical and horizontal offsets of the “text-shadow” property.
Eager to see how this will be accomplished in a few simple steps? Then jump forward and start reading!
Review: adding a shadow to the text of a web page element
Just in case you haven't read the introductory chapter of this series, where I explained how to use the “text-shadow” CSS3 property to decorate the H2 elements of a sample web page, below I reintroduced the source code corresponding to the two examples I used.
First, here’s the example that employs the property to add an “inset-like” effect to the elements. Take a peek at it:
<!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 (inset-like text)</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: #969696;
background: #e0e0e0;
text-shadow: 1px 1px 1px #fff;
}
</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>
From the previous example, it’s clear to see that the utilization of the “text-shadow” property is really a simple process that doesn’t differ too much from using other, older CSS properties. Since the first two arguments taken by the property assign the top and left offsets of the shadow, while the remaining ones control its blur and color, respectively, creating an “inset” effect is reduced to dropping in a white shadow shifted 1px to the right and bottom of the target element. The result of this process is depicted in the following image:
Not too bad, eh? Since rendering this effect only required us to code a few CSS styles, the output is more than acceptable. However, the flexibility offered by “text-shadow” permits us to create different shading effects. If you’re still skeptical, simply look at the following example, which adds a black shadow to the selected H2 elements, while the wrapped text this time is white:
<!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 colors of text and 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 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>
As you’ll agree, the above example is pretty similar to the one shown previously. Therefore, look at the screen capture below. It shows how the target H2 headers look after applying this new shading effect:
There you have it. A subtle change in the colors assigned to the text of the HTML elements and the corresponding shadows can yield quite impressive results. But hold on a second! What if you need to highlight the wrapped text even more? This task can be easily accomplished by assigning higher values to the shadow’s left and top offsets.
That’s exactly the case that I plan to discuss in the coming segment. To get there, click on the following link and keep reading.
Certainly, there are many ways to make a header element stand out from the background of its web page. However, one approach that works remarkably well in most cases consists of adding a dark shadow slightly shifted away from the wrapped text.
Since the “text-shadow” property makes this an easy process, below I redefined the “shadowed_text” CSS class that you saw in the previous section. This time, it displaces the shadow 2px to the right and bottom of the target element. The revamped version of this class now looks like this:
.shadowed_text {
padding: 20px;
color: #fff;
background: #e0e0e0;
text-shadow: 2px 2px 1px #000;
}
Definitely, the way that the above CSS class has been rewritten is pretty self-explanatory. All that it does is use the “text-shadow” property to drop a black shadow, which is shifted 2px to the right and down from the text of the target selector.
While it's easy to understand the definition of this class, it’s necessary to attach its styles to the markup of the web page containing the sample H2 elements, so you can see the results that it produces. That’s exactly what I’m going to do below, so read the lines to come.
Rendering shadowed H2 elements in a web page
If you’re like me, then you want to see how the previous H2 elements look after we add this new shading effect. Look at the following web page, which assigns the “shadowed_text” CSS class just defined to these elements:
<!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>
As the above code sample illustrates, each H2 header included into the main sections of the previous web page has been styled with the amended version of the “shadowed_text” class. When tested on any browser that supports the “text-shadow” property, this page generates the following output:
That’s pretty good, right? Even though this example is somewhat contrived, it shows in a nutshell how easy it is to create different shading effects by altering, either individually or at the same time, the parameters of the “text-shadow” property. In this case, I deliberately modified the top and left offsets of the dropped shadow; it’s feasible, however, to produce interesting variations by changing the values assigned to its blur. This topic will be discussed in detail in the next tutorial.
Final thoughts
In this second installment of the series, I demonstrated through another basic example how easy it is to render a different shading effect by simply modifying the parameters of the “text-shadow” property that control the shadow’s top and left offsets. Of course, there’s plenty of room to experiment here, as it’s also possible to play around with the argument that determines the amount of blur applied to the shadow.
Given this interesting possibility, in the next tutorial I’m going to use some functional code to show you how to create a blurred shadow by tweaking the aforementioned parameter.
Don’t miss the next part!