Here is a simple code snippette I wrote for you to experiment with. It uses a relatively-positioned "outer" DIV with an absolutely-positioned "inner" div inside of it. And through positioning, I have it moved slightly to the right and negatively moved up several pixels, revealing the left & bottom border & background-color of the 'lower' DIV, suggestive of a shadow.
There are a few drawbacks to this method, -mostly that if you add content to the "inner" white space DIV, it expands and the shadow does not expand with it, so you must manually add pixels to height and maybe width...
But the virtue is that this is an easy effect, and if you're using photographs (as in the link you showed), the shadow div won't be expanding as it would it text were added.
I added a 'darker' border to the "inner" div to show it's presence, but if you comment that out, you'll still see the underlay effect of a shadow. You just won't see the top & right edges of the white text-area anymore...
enjoy!
-Joel
<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
#outer {position:relative; left:50px; top:50px; border-left:4px solid #ececec; border-bottom:4px solid #ececec; background-color:#d7d7d7; width:420px; height:430px}
#inner {position:absolute; left:4px; top:-9px; width:400px; height:400px; border:2px solid #b7b7b7; background-color:white; padding:20px 10px 10px 10px;}
</style>
</head>
<body>
<!-- next is OUTER relative div, which is 'beneith' and has the shadows -->
<div id="outer">
<!-- Next is the INNER absolute div which has white background, padding and YOUR TEXT -->
<!-- As you add YOUR TEXT to INNER, it will expand, so you must also expand W & H of OUTER -->
<div id="inner">
<h3>Some Title</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div><!-- end INNER -->
</div><!-- end OUTER -->
</body>
</html>