Warp Shadow effect using CSS 3 only.
It’s an old time to create an effect of drop shadow using Photoshop or any other image editing tool for web page.
Thanks to CSS 3 which enable us to apply nice shadow effect through easy way. It increase the speed of page load and downloads the lesser bytes compare to images for shadow effect. In this blog our main focus will be on applying warp shadow effect using CSS 3. Basically there is not any direct style which can be applied as a warp shadow to any block. We are going to apply some trick here, using shadow and border curve.
CSS 3 user must be aware of Box Shadow and border radius.
For more detail visit following links.
Box Shadow: http://www.css3.info/preview/box-shadow/
Border Radius: http://www.css3.info/preview/rounded-border/

Following is the complete code for CSS and HTML.

CSS Code
<style>
.box
{
padding-top: 50px;
padding-bottom: 50px;
padding-left: 100px;
width: 200px;
}
.boxColor
{
background: -webkit-gradient(linear, left top, left bottom, from(#FFDB4D), to(#EABB00));
background: -moz-linear-gradient(top, #FFDB4D, #EABB00);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFDB4D’, endColorstr=’#EABB00′);
}
.shadow_box
{
-moz-box-shadow: 0px 10px 5px #9C9C9C;
-webkit-box-shadow: 0px 10px 5px #9C9C9C;
box-shadow: 0px 10px 5px #9C9C9C;
position: relative;
}
.shadow_box span.warp
{
width: 100%;
height: 13px;
position: absolute;
bottom: -26px; /* ~equal to the height + shadow y offset + shadow blur radius */
right: 0px;
box-shadow: 0px -10px 5px #fff;
-moz-box-shadow: 0px -10px 5px #fff;
-webkit-box-shadow: 0px -10px 5px #fff;
border-radius: 50% / 20px;
-moz-border-radius: 50% / 20px;
-webkit-border-radius: 400px 20px;
}
</style>

HTML Code

Following screenshot is a result of the above css and html.
.shadow_box css class applies the shadow effect on the div. .shadow_box span.warp css class applies shadow and curved border effect on the span tag and span’s curved shadow overlaps the div’s shadow.




For more detail click here or visit following link:
http://lokeshkhinchi.wordpress.com/2010/12/10/warp-shadow-using-css-3/