Как сделать отражение текста (эффект мокрый пол) на CSS?

Категория: Интернет
Для создания отражения текста используется такой код.
Пример
Пример CSS отражения
<style type="text/css">
.main {
    width: 900px;
    margin: 0 auto;
    padding-top: 30px;
}
/* отражаем текст */
.h1-css {
    color: #000066;
    font-size: 24px;
    margin-bottom: 30px;
    position: relative;
    line-height: 24px;
}
.h1-css:after,
.menu-css a:after {
    content: attr(title);
    position:absolute;
    left:0;
    top:100%;
    width:100%;
    height:100%;
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
    z-index: 1;
}
.h1-css:before,
.menu-css:before {
    content: "";
    display: block;
    width: 100%;
    height: 80%;
    background:-moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1));
    background: -o-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,1));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.7)), to(rgba(255,255,255,1)));
    position: absolute;
    left: 0;
    top: 110%;
    z-index: 2;
}
ul {
    list-style: none;
    margin-bottom: 30px;
}
li {
    display: inline;
    margin-right: 30px;
    color: #000099;
}
li a {
    text-decoration: none;
    font-size: 14px;
    color: #000099;
    display: inline-block;
    position: relative;
}
li a:hover {
    color: #FF0000;
}
.menu-css {
    position: relative;
}
</style>
 
<!--[if lte IE 9]>
<style>
.h1-after,
.menu-after {
    position:absolute;
    left:0;
    top:100%;
    z-index: 1;
    background: #fff;
    -ms-filter: "flipV progid:DXImageTransform.Microsoft.Alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=70)";
    filter: flipV progid:DXImageTransform.Microsoft.Alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=70);
}
.h1-css:after,
.menu-css a:after {
    display: none;
}
</style>
<script>
textReflect = function()
{
    // отражение для заголовка
    var el = document.getElementsByTagName("h1")[0];
    el.insertAdjacentHTML("afterBegin", "<span class='h1-after'>"+el.firstChild.nodeValue+"</span>");
 
    // отражения для меню
    var menu = document.getElementsByTagName("a"),
        i,
        lenMenu = menu.length;
 
    for(i=0;i<lenMenu;i++) menu[i].insertAdjacentHTML("afterBegin", "<span class='menu-after'>"+menu[i].firstChild.nodeValue+"</span>");
 
}
    window.onload=textReflect;
 
</script>
<![endif]-->
 
<div class="main">
<div class="h1-css" title="Пример CSS отражения">Пример CSS отражения</div>
    <ul class="menu-css">
    <li><a href="#" title="Главная">Главная</a></li>
    <li><a href="#" title="О компании">О компании</a></li>
    <li><a href="#" title="Каталог">Каталог</a></li>
    <li><a href="#" title="Наши контакты">Наши контакты</a></li>
    </ul>
</div>