Home arrow Style Sheets arrow Rendering CSS Shadows: Creating Blurred Shadows
STYLE SHEETS

Rendering CSS Shadows: Creating Blurred Shadows


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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
December 15, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows: Creating Blurred Shadows
  2. · Manipulating a shadow's blur for a softer effect

print this article
SEARCH DEVARTICLES

Rendering CSS Shadows: Creating Blurred Shadows
(Page 1 of 2 )

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.
  


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