|
Copied To Clipboard!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS3 Image Reflection</title>
<style>
/* Begin Pure CSS3 Image Reflection */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Jaspreet Kaur : http://www.xhtml-lab.com/css/create-reflection-effect-using-css3 : Creative Commons License == */
BODY {margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
#content {margin:0px 15px 0px 5px;}
/* Theme White */
#gallery-white {width:490px;margin:50px auto 0px;position:relative;overflow:hidden;background:#FFF;padding:0px 50px;border:1px solid #ccc;}
#gallery-white h1 {text-align:center;font:20px Arial, Helvetica, sans-serif;margin-bottom:50px;}
#gallery-white h1 span {font-size:12px;}
#gallery-white .image-block {width:78px;margin:0px 10px;float:left;}
#gallery-white .reflection {position:relative;}
#gallery-white .reflection img {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv;
opacity:0.20;
filter: alpha(opacity='20');
}
#gallery-white .overlay {position:absolute; top:0px; left:0px; width:78px; height:120px;
background-image:-moz-linear-gradient(center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
background-image:-o-linear-gradient(rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#ffffff);
}
#gallery-white .vline {position:absolute;bottom:70px;border-bottom:2px solid #666;width:490px;}
/* Theme Black */
#gallery-black {width:490px;margin:50px auto 0px;position:relative;overflow:hidden;background:#000;padding:0px 50px;border:1px solid #ccc;}
#gallery-black h1 {text-align:center;font:20px Arial, Helvetica, sans-serif;margin-bottom:50px;color:#FFF;}
#gallery-black h1 span {font-size:12px;}
#gallery-black .image-block {width:78px;margin:0px 10px;float:left;}
#gallery-black .reflection {position:relative;}
#gallery-black .reflection img {
-webkit-transform:scaleY(-1);
-moz-transform:scaleY(-1);
-ms-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
filter:flipv;
opacity:0.20;
filter:alpha(opacity='20');
}
#gallery-black .overlay {position:absolute; top:0px; left:0px; width:78px; height:120px;
background-image:-moz-linear-gradient(center bottom, rgb(0,0,0) 60%, rgba(0,0,0,0) 75%);
background-image:-o-linear-gradient(rgba(0,0,0,0) 25%, rgb(0,0,0) 40%);
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(0,0,0)), color-stop(0.75, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}
#gallery-black .vline {position:absolute;bottom:70px;border-bottom:2px solid #333;width:490px;}
/* Common styling for link */
p {text-align:center; font-size:18px; font-family:Arial, Helvetica, sans-serif; padding-top:20px;}
a {color:#0000ff; text-decoration:none;}
a:hover {color:#007730;text-decoration:underline;}
</style>
</head>
<body>
<div id="content">
<div id="gallery-black">
<h1>CSS3 Reflection Demo <span>(Theme Black)</span></h1>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="vline"></div>
</div>
<div id="gallery-white">
<h1>CSS3 Reflection Demo <span>(Theme White)</span></h1>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book1.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book2.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book3.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book4.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="image-block"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" />
<div class="reflection"><img src="http://snapbuilder.com/code_snippets/view_code_example/css/image_effects/css3_image_reflection/images/book5.jpg" alt="" />
<div class="overlay"></div>
</div></div>
<div class="vline"></div>
</div>
<h3 align="center">Pure CSS3 3D Drop List Menu Navigation</h3>
<p>Roll your cursor over the navigation bar for an example.
<br />
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_200.html">Pure CSS3 Image Reflection Code Snippet</a> page. ]</p>
<p><a href="http://www.xhtml-lab.com/css/create-reflection-effect-using-css3" target="_new">Click here for tutorial</a></p>
</div>
</body>
</html>
|