CSS3 倒影效果

CSS3 reflection

 

CSS3 reflection is a nice way to get reflection effect without using JavaScript.

To use CSS3 reflection, use command:

box-reflect: <direction> <offset> <mask-box>;

Just copy/paste following snippet to use CSS3 reflection from example below:

<img src="http://stuntsnippets.com/demo/css3-transitions.png" mce_src="http://stuntsnippets.com/demo/css3-transitions.png" width="200" height="200" style="-webkit-box-reflect: right 1px -webkit-gradient(linear, left top, right top, from(transparent), color-stop(0.4, transparent), to(white));" />

Example of CSS3 reflection:

Notice:
Only problem with using this CSS3 effect is – only Chrome and Safari support it at this moment.