Currently, I am utilizing -webkit-box-reflect to create a reflection for a div along with its content.
I am wondering how I can adjust just the reflection in CSS without affecting the original content. For example, if I want to change the opacity of the reflection only, what would be the best way to achieve this?
On another note, is there a method to avoid giving the reflection a mirrored effect by using -webkit-box-reflect? Rather, I want it to appear as though I have duplicated the div/content. This duplication can be placed below, above, or beside the original.
.div1 {
color: white;
background-color:green;
position: absolute;
height: 50px;
width: 150px;
margin left: 50px;
left: 100px;
margin-bottom: 200px;
margin-top: 100px;
top: 15px;
-webkit-box-reflect: right 1px;
}
.div2 {
color: white;
background-color:blue;
position: absolute;
height: 50px;
width: 150px;
margin left: 50px;
left: 100px;
margin-bottom: 200px;
margin-top: 100px;
top: 70px;
-webkit-box-reflect: below 1px;
} <html>
<head>
<div class="div1">div1 test</div>
<div class="div2">div2 test</div>
</head>
</html>