I’m trying to create a reflection of some HTML, where the reflection fades away. Example of what I have so far: http://www.iliveinabin.com/reflection-test/
For Webkit / blink, this can be achieved by using
-webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1));
However, the reflection overlays the following content. I am not sure how the following content can be pushed down below the reflection, unless the item being reflected had a definite height, in which case you could apply a margin-top to the list’s following sibling, e.g.
#list-webkit +*{margin-top: 50px;}
For Firefox the reflection can be created using css generated content, with a transform applied and -moz-element() used as the background to copy the item you want reflecting.
However, there does not seem to be a way to fade out the reflection in Firefox. You can apply a gradient on top, but this only really works if your site has a plain background. I have tried using mask with an SVG, but I think I must be doing something wrong (either with my SVG or CSS code) as it just makes the reflection disappear completely.
<!DOCTYPE html>
<html>
<head>
<title>CSS Refection test</title>
<style type="text/css">
html,body{
height: 100%;
}
body{
background: #000 linear-gradient(#777, #000) 0 0 no-repeat;
/*background-size: 100% 300px;*/
color: #fff;
}
a:hover{
color: #f00;
}
#list-webkit{
-webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,1));
}
#list-moz:after {
content: "";
display: block;
background: linear-gradient(to bottom, rgba(60,60,60,1) 0%,rgba(67,67,67,0) 100%), -moz-element(#list-moz) 0 -50px no-repeat;
width: auto;
height: 50px;
margin-left: -40px; /*undo -moz-padding-start applied to parent ul otherwise the reflection will be indented*/
-moz-transform: scaleY(-1);
/*mask: url(gradient.svg#r);*/
}
</style>
</head>
<body>
<h3>Webkit / Blink:</h3>
<ul id="list-webkit"><li><a href="#">Item One</a></li><li><a href="#">Item Two</a></li><li><a href="#">Item Three</a></li><li><a href="#">Item Four</a></li><li><a href="#">Item Five</a></li></ul>
<p>Here is some text.</p>
<h3>Gecko:</h3>
<ul id="list-moz"><li><a href="#">Item One</a></li><li><a href="#">Item Two</a></li><li><a href="#">Item Three</a></li><li><a href="#">Item Four</a></li><li><a href="#">Item Five</a></li></ul>
<p>Here is some text.</p>
</body>
</html>