If some where is required to use reflection for achieving cool backgrounds, the designer had to
use couples of images with loads of positioning and opacity stuff, but with CSS3 this can be
done easily
As show in the image below the reflection achieved with just a small css code.
The reflection use the box property of CSS3
Use this code to achieve the reflection
The CSS code:
#imgmask
{
-webkit-box-reflect:below 4px -webkit-gradient(linear,left top , left bottom, from(transparent), to(rgba(255,255,255,.5)));
-moz-box-reflect:below 4px -webkit-gradient(linear,left top , left bottom, from(transparent), to(rgba(255,255,255,.5)));
-ie-box-reflect:below 4px -webkit-gradient(linear,left top , left bottom, from(transparent), to(rgba(255,255,255,.5)));
-o-box-reflect:below 4px -webkit-gradient(linear,left top , left bottom, from(transparent), to(rgba(255,255,255,.5)));
}
The HTML code:
<div id="imgmask">
<img src="imgs/Vivek Doshi.jpg" height="200" width="200" />
</div>
The -webkit and other specific the vendor prefix for using the property as each implements this
differently. The webkit browser (Chrome and Safari) support fully others implements it partly.
For demo visit:http://iamvivekdoshi.co.cc/mask.html
Tags: CSS 3