Home arrow Style Sheets arrow Rendering CSS Shadows with the text-shadow and box-shadow Properties
STYLE SHEETS

Rendering CSS Shadows with the text-shadow and box-shadow Properties


Although the CSS3 specification has not been officially released yet and is not currently supported by all modern browsers (Internet Explorer being the most notable offender), itís possible to implement some of its most attractive properties. This can give you a more intimate knowledge of the new trends that modern web design will impose in the (hopefully) near future. In this series, you'll learn how to use two properties that let you render some very attractive shadows with CSS, namely the text-shadow and box-shadow properties.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
December 06, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows with the text-shadow and box-shadow Properties
  2. · Generating stylish shadowed text

print this article
SEARCH DEVARTICLES

Rendering CSS Shadows with the text-shadow and box-shadow Properties
(Page 1 of 2 )

In a couple of article series previously published here at the prestigious Developer Shed Network, I covered some of CSS3's brand new properties, including "rgba" and "transform," in a humble attempt to analyze the new specification from a practical standpoint.

As you may already know, however, CSS3 includes a number of additional properties that make it considerably easier and faster to define the visual presentation of the elements of a web page. Good examples of these are the "text-shadow" and "box-shadow" properties. They allow you to add all sorts of appealing shadows to a selected HTML element, and to the text it contains, without having to rely on heavy background images.

Assuming you're interested in learning how to use the aforementioned properties, over the course of this series of articles I'm going to develop some basic examples that will give you a clearer idea of the actual functionality of the properties.

In summary: are you ready to learn how to include cool shadows on your own web pages by using only CSS? Then don't hesitate; start reading right now!

Getting started: building a basic web page

As I explained in the introduction, CSS3 includes two brand new properties that allow you to add appealing shadows to an element of a web page without using background images. In this particular case, I'm going to start discussing the "text-shadow" property, which permits you to easily drop a shadow into the text wrapped by an HTML element.

To demonstrate the functionality of this property, below I created a simple web page that contains the three typical sections that can be found today on nearly every website: a header, a main content area and a footer. The source code for this sample HTML page is as follows:

<!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</title>
</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 can see above, the structure of this web page presents nothing especially interesting, with a subtle, tiny exception. Each of the aforementioned sections includes an H2 element, which has been assigned a CSS class called "shadowed_text."  

The purpose in defining this class is easily guessable. If you test the page using your own browser, all of its heading elements will look pretty rudimentary. Of course, here's where the "text-shadow"  property comes into play, since it's possible polish the visual presentation of these elements by simply adding a thin shadow to them.

That's exactly what I plan to do in the following section; thus, to learn the full details of this styling process, click on the link below 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