How to Create CSS Image Reflections with Shadow

WebKit now supports reflections in CSS.

Reflection CSS Code.


-webkit-box-reflect: <direction> <offset> <mask-box-image>


-webkit-box-reflect:
  <direction> - above|below|left|right
  <offset>    - pixel value start offset from image
  <mask-box-image>


Eg : -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.9, transparent), to(white));


Shadow CSS Code.

<div id="box">
<img src="Sample-4.jpg" />
</div>

CSS


<style type="text/css">
<!--

#box
{
  position: relative;
  width:600px;
  height:450px;
  background: #ddd;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: rgba(0,0,0, .8);
  text-shadow: 0 1px 0 #fff;
  line-height: 1.5;
  margin: 60px auto;
  border: 1px solid #A3A3A3;

}


#box:before, #box:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);  
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  -webkit-transform: rotate(-3deg);  
  -moz-transform: rotate(-3deg);  
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

#box:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
-->
</style>