Image reflection using box reflect property

{ Published by Anirudh - On Saturday, March 24, 2012 - 0 }


Image reflection using box reflect property

In the previous tutorial we used the negative scale transformation property to give reflection of text.Now that can be made more easy using css3 feature called box-reflect.Here we will use it to give reflection of an image.




Image-Reflection

In the previous tutorial we used the negative scale transformation property to give reflection of text.Now that can be made more easy using css3 feature called box-reflect.Here we will use it to give reflection of an image.It's just a simple introduction to this feature.To give some better effects to the image we have used the gradient property also.







BASIC HTML



<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title> Image Reflection</title>

<style>

img{


margin-left:350px;

-webkit-box-reflect:below 0px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(0,0,0,.9)));
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
opacity:.8;
}

</style>


</head>
<body>
<img src="img.jpg">
</body>
</html>


For a video tutorial see here