Make a div appear as though the bottom left and right corners are lifting off the page a little using box shadow? - shadow

Question

Does anyone know of a tutorial on how to do this, or does anyone have a little example?
example: http://hazelmade.com/projects.html

Answer 1

The 'lifted corners' example on this CSS drop-shadows without images demo page shows it's possible without using images. It relies on CSS3 support, specifically box-shadow and transform but this is to be expected from a pure CSS solution.
Full details of the technique can be found in the main article by Nicolas Gallagher.

Answer 2

The shadow on that site is a custom made image tailored to the specific width of those elements.
If you wanted to follow a similar technique that they did, you could just add a child image absolutely positioned below the div...
jsfiddle example: http://jsfiddle.net/gbFNk/
HTML:
<div id="example">
content here...
<img id="shadow" src="http://hazelmade.com/images/drop_shadow.png" />
</div>
css:
#example {
width:796px; //your tailor made shadow needs to be this long
height:100px;
position:relative;
background:grey;
}
#shadow {
position:absolute;
bottom:-15px; //this is the height of the custom image.
}
Alternatively, if you need a drop shadow like that with varying width you make 2 shadows (one for each corner) and do something like the following:
HTML:
<div id="example">
content here...
<div id="dropshadow">
<img class="left_shadow" src="leftshadow.png" />
<img class="right_shadow" src="rightshadow.png" />
<div style="clear:both"></div>
</div>
</div>
css:
#example {
width:796px;
height:100px;
position:relative;
background:grey;
}
#dropshadow {
width:796px; //needs to be the same width as the parent div
position:absolute;
bottom:-15px; //this still needs to be the height of the custom images.
}
#dropshadow img.left_shadow {
float:left;
}
#dropshadow img.right_shadow {
float:right;
}