Home arrow JavaScript arrow Box-Shadows with Javascript Modenizr for CSS3 and HTML5
JAVASCRIPT

Box-Shadows with Javascript Modenizr for CSS3 and HTML5


Modernizr is a lightweight Javascript library that lets you fully utilize a set of CSS classes based on CSS3 and HTML5 features by appending them to your page's <html> element. In this tutorial, we will walk you through the steps of creating "box-shadows" with this handy resource in a few simple, hands-on examples.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
April 04, 2011
TABLE OF CONTENTS:
  1. · Box-Shadows with Javascript Modenizr for CSS3 and HTML5
  2. · How to Render CSS3/HTML5 in Non-compliant Browsers

print this article
SEARCH DEVARTICLES

Box-Shadows with Javascript Modenizr for CSS3 and HTML5
(Page 1 of 2 )

If you already read the previous article of the series (Modenizr Javascript Library for CSS3 and HTML5), you are probably familiar with the way the library does its business. In that introductory tutorial I explained how to use Modernizr for styling the H2 elements in a sample web page via the “text-shadow” CSS3 property. Since Modernizr generates CSS classes whose names detect whether or not a specific feature is supported by the browser, and then respond accordingly, the entire styling process was reduced to assigning the targeted elements a “text-shadow” and “no-textshadow” class respectively.

Naturally, Modernizr will let you do conditional styling with popular CSS3 properties other than “text-shadow.” So in this second part of the series I’m going to set up another basic example which will demonstrate how to use the library, but this time with the “box-shadow” property.

Do you want to see how this conditional styling process will be accomplished in a few easy steps? Then let's get started!

Adding Shadows to Block-level HTML Elements: Using Modernizr with the 'box-shadow' CSS3 Property

As we stated in the introduction, Modernizr makes it really simple to perform conditional styling based on the support that browsers offer for a given CSS3 property. To elaborate on this concept, I’m going to create a web page similar to the one that you saw in the previous article. This time, though, you’ll see how simple it is to “conditionally” use the “box-shadow” property, thanks to the library’s browser sniffing abilities.

But first things first. Here's the code for a sample web page:

<!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>Using Modernizr with the 'box-shadow' CSS3 property</title>
<script src="modernizr-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
    <h1>Using Modernizr with the 'box-shadow' CSS3 property</h1>
    <h2>This is a sample heading element</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>
    <h2>This is a sample heading element</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>
    <h2>This is a sample heading element</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>
</body>
</html>

There’s not much that can be said about the above (X)HTML document, as its structure is extremely simple. Despite this, you may have noticed that the document includes Modernizr at first. But what does this buy us in practical terms? Well, since the library adds a bunch of CSS classes behind the scenes, if the document is tested using Firefox, there would exist a class called “boxshadow,” as the browser effectively supports the “box-shadow” CSS3 property. With this class freely available for use, it’s simple to decorate the H2 elements of the page with a stylish shadow effect. That’s exactly what I’ll be doing in the following segment.

Making Things Look Prettier: Adding a Shading Effect to the Previous H2 Elements

There’s no need to be a rocket scientist to realize that using the “box-shadow” property with the H2 elements included in the previous web page is a straightforward process that can be accomplished in a snap. Since Modernizr has appended to the page’s <html> element a class named “boxshadow” (remember that this occurs when using Firefox or any other CSS3-compliant browser), the entire task of styling is reduced to writing the following CSS snippet:

body {
    padding: 0;
    margin: 0;
    background: #000;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #fff;
}
#wrapper {
    width: 920px;
    padding: 20px;
    margin: 0 auto;
    background: #585858;
}
h1 {
    font-size: 3.2em;
}
/* Using default styles */
h2 {
    padding: 10px;
    font-size: 3em;
    color: #808080;
    background: #eee;
}
.boxshadow h2 {
    box-shadow: 1px 1px 2px #000;
   -moz-box-shadow: 1px 1px 4px #000;
   -webkit-box-shadow: 1px 1px 2px #000;
}

 That was super simple to grasp, wasn’t it? Since Modernizr has generated a CSS class that reflects the support that the browser offers for “box-shadow,” using the property to refine the visual presentation of the target H2 elements is indeed a breeze.

Of course, this example would be unfinished if I didn’t show you how these elements look when rendered (for instance) on Firefox. The following image does that:



Mission accomplished. At this stage, I’m sure that you understand how to use Modernizr along with the “box-shadow” property. However, there’s a use case that hasn’t been covered yet. What if the previous web page is run on a browser that doesn’t recognize the pertinent property? Well, in a case like this, the library would create a class named “no-boxshadow,” which could be used to assign fallback styles to the corresponding H2 elements.

Naturally, the best way to showcase this scenario is by example. So, in the following segment I’ll be setting up a new one, which you’ll be able to tweak at will.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

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