<!DOCTYPE html>
<html>
<style>
.reflect {
position: relative;
}
.reflect:after {
-moz-transform: translateY(10px) scaleY(-1);
bottom: -100%;
content: "";
left: 0;
mask: url("mask.svg#mask");
opacity: 0.4;
position: absolute;
right: 0;
top: 100%;
z-index: -1;
}
div {
float: left;
margin: 30px;
}
#circle {
background: none repeat scroll 0 0 deeppink;
border-radius: 50% 50% 50% 50%;
height: 100px;
padding: 50px 20px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
width: 100px;
}
#circle:after {
background: -moz-element(#circle) repeat scroll 0 0 transparent;
}
#image {
background-image: url('http://2.bp.blogspot.com/-
4pHdZg5dmvk/T3P_D9ZjV1I/AAAAAAAAAvE/qHJUm3b-c_I/s1600/9.png'); // Add Here Your Background
Image
border-radius: 10px 10px 10px 10px;
height: 100px;
padding: 50px 20px;
text-align: center;
text-shadow: 0 -1px 0 white;
width: 165px;
}
#image:after {
background: -moz-element(#image) repeat scroll 0 0 transparent;
}
</style>
<body>
<div id="circle" class="reflect">This is Circle One and Using Circle Class.</div>
<div id="image" class="reflect">This is using Background Image and You can change Image Url in image
CSS.<div/>
</body>
</html>
0 comments:
Post a Comment