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

Does anyone know of a tutorial on how to do this, or does anyone have a little example?

开发者_JAVA百科example: http://hazelmade.com/projects.html

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.

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;
}