Tutorials All - Webdesign, Graphic Design

Visit our new Webdesign Templates,css,html5 etc

Download New Android Applications

Visit our new Collections of Android Application

29.12.12

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>





0 comments:

Post a Comment