DZone Snippets: shadow code http://snippets.dzone.com/posts Thu, 24 Jul 2008 07:39:14 GMT DZone Snippets: shadow code CSS Drop Shadows http://snippets.dzone.com/posts/show/3140 This handy technique allows us to build flexible CSS drop shadows that we can apply to any arbitraryblock elements. The beauty of this method is that most exisitng techniques use images to create the shadow effect. This script is lightweight and uses pure CSS! ENJOY! <br /><a href="http://www.webscriptexpert.com">www.webscriptexpert.com</a> <br /> <br /><HTML PAGE HERE> <br /><code> <br /> <br /> <br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <br /><head> <br /><title>CSS Drop Shadow DEMO</title> <br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <br /><link media="screen" type="text/css" rel="stylesheet" href="dropshadow.css" /> <br /> <br /><style> <br />body { <br />margin: 0px; <br />padding: 20px; <br />font-family: verdana; <br />font-size: 12px; <br />min-width: 770px; <br />} <br /></style> <br /> <br /></head> <br /> <br /><body> <br /> <br /><div id="shadow-container"> <br /><div class="shadow1"> <br /> <br /><div class="shadow2"> <br /><div class="shadow3"> <br /><div class="container"> <br /><p>This is a sample of how we implement the CSS style to create flexible CSS drop shadows that can be applied to block elements.</p> <br /><p>The beauty of this script is that is doesnt use any images to create the final effect, just pure CSS!</p> <br /></div> <br /></div> <br /></div> <br /></div> <br /></div> <br /> <br /><br /> <br /><br /> <br /> <br /><table cellspacing=0 cellpadding=0 border=0 width="100%"><tr valign="top"> <br /><td width="22%" height="218"> <br /><div id="shadow-container"> <br /><div class="shadow1"> <br /><div class="shadow2"> <br /><div class="shadow3"> <br /><div class="container"> <br />The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div> <br /> <br /></div> <br /></div> <br /></div> <br /></div> <br /></td> <br /><td width="21%"></td> <br /><td width="57%"> <br /><div id="shadow-container"> <br /><div class="shadow1"> <br /><div class="shadow2"> <br /> <br /><div class="shadow3"> <br /><div class="container">The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. </div> <br /></div> <br /></div> <br /></div> <br /></div> <br /></td> <br /></tr></table> <br /> <br /></body> <br /></html> <br /> <br /></code> <br /> <br /> <br /><.CSS FILE HERE> <br /><code> <br /> <br />/* CSS container shadow */ <br />#shadow-container { <br />position: relative; <br />left: 3px; <br />top: 3px; <br />margin-right: 3px; <br />margin-bottom: 3px; <br />} <br /> <br />#shadow-container .shadow2, <br />#shadow-container .shadow3, <br />#shadow-container .container { <br />position: relative; <br />left: -1px; <br />top: -1px; <br />} <br /> <br />#shadow-container .shadow1 { <br />background: #F1F0F1; <br />} <br /> <br />#shadow-container .shadow2 { <br />background: #DBDADB; <br />} <br /> <br />#shadow-container .shadow3 { <br />background: #B8B6B8; <br />} <br /> <br />#shadow-container .container { <br />background: #ffffff; <br />border: 1px solid #848284; <br />padding: 10px; <br />} <br />/* CSS container shadow */ <br /> <br /></code> Wed, 13 Dec 2006 00:53:02 GMT http://snippets.dzone.com/posts/show/3140 webscriptexpert (r)