Home arrow Style Sheets arrow Rendering CSS Shadows: a Final Example
STYLE SHEETS

Rendering CSS Shadows: a Final Example


If you’re tired of launching Photoshop every time that you need to include a shadowed element in your web pages, then take a peek at the tandem composed of “text-shadow” and “box-shadow.” These two powerful properties, packaged with the CSS3 specification, will let you add very engaging shadows to your HTML elements without having to use a single background image. In this conclusion to a seven-part series, we'll polish the look of the example we showed you in the previous part.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
December 28, 2010
TABLE OF CONTENTS:
  1. · Rendering CSS Shadows: a Final Example
  2. · Polishing

print this article
SEARCH DEVARTICLES

Rendering CSS Shadows: a Final Example
(Page 1 of 2 )

Of course, not all is pleasant when it comes to creating pure CSS-based shadows. The process comes with a hidden cost. As you might have already guessed, not all modern browsers offer complete support for these properties. The most notorious case, unsurprisingly, is Internet Explorer (though its version 9  will be partially compliant with CSS3). Regardless of these well-known incompatibility issues, it’s really interesting and educational to give the properties a try and see how functional they can be when used in a few concrete cases.

With that in mind, in the previous chapters of this series I built a few approachable examples that hopefully demonstrated how to get the most out of the properties, by adding different kinds of shadows to either the inner text of some HTML elements, or to the elements themselves. This last case was covered in more detail in the last installment, which showed how minimal changes to the values assigned to the horizontal and vertical offsets of the “box-shadow” property can yield quite different results.

However, the arguments noted above aren’t the only ones provided by the property that can be tweaked. It's possible to apply higher levels of blur to rendered shadows, thus making them look a bit softer and more polished. To illustrate the inner workings of this process from a practical point of view, in this last part of the series I’m going to set up another basic example. It will soften the shadow applied to the same HTML containers used in the preceding tutorial.

Want to see how this will be done? Then begin reading!

Review: altering the box-shadow property’s top and left offsets

Since my goal in this last part is to demonstrate how to blur the shadow initially applied to the sample divs defined in the previous part, it’d be helpful to recall the settings that were assigned to the “box-shadow” property in that particular case. Here’s the web page that adds a sharp shadow to the aforementioned HTML elements: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example using the 'box-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_container {
    padding: 15px;
    color: #000;
    background: #ffffe6;
    border: 1px solid #ccc;
    box-shadow: 5px 5px 1px #808080;
    -moz-box-shadow: 5px 5px 1px #808080;
    -webkit-box-shadow: 5px 5px 1px #808080;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <h1>Example using the 'box-shadow' CSS3 property</h1>
        <h2>Header section</h2>
        <div class="shadowed_container">
            <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>
    <div id="content">
        <h2>Main content section</h2>
        <div class="shadowed_container">
            <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>
    <div id="footer">
        <h2>Footer section</h2>
        <div class="shadowed_container">
            <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>
</div>
</body>
</html>

As shown in the above code snippet, a value of 5px has been assigned to the horizontal and vertical offsets of the “box-shadow” property. Even though it's extremely simple, this trick accentuates the shadows applied to the target containers. What’s more, the result of this process can be seen pretty clearly in the following screen capture: 

So far, so good. While the containers look quite engaging in their current state, the shadow around them can be improved a bit further. You're wondering how, right? Well, as I expressed in the introduction, it’s possible to make the shadow a bit softer by applying a higher level of blur to it. As you'll recall, this is controlled by the fourth argument taken by the “box-shadow” property.

Since this polishing process is really simple to achieve, in the following segment I’m going to change the definition of the already familiar “shadowed_container” CSS class to reflect this small improvement.

To see how this will be done, jump ahead 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