Home arrow Style Sheets arrow Rendering CSS Shadows: Altering Shadow Offsets
STYLE SHEETS

Rendering CSS Shadows: Altering Shadow Offsets


In this second part of a series, I demonstrate how easy it is to render a different, interesting shading effect by modifying the parameters of the “text-shadow” property that control the shadow’s top and left offsets.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 1
December 14, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows: Altering Shadow Offsets
  2. · Tweaking the shadow’s vertical and horizontal offsets

print this article
SEARCH DEVARTICLES

Rendering CSS Shadows: Altering Shadow Offsets
(Page 1 of 2 )

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. 


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