CSS3 Reflections

by Roman

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>CSS3 Reflections</title>
        <meta name="description" content="Reflection..." />
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />        
        <link rel="stylesheet" href="style.css" />        
    </head>
    <!--[if lt IE 9 ]> <body class="oldie"> <![endif]-->
    <!--[if IE 9 ]> <body class="ie9"> <![endif]-->    
    <!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->   
        <div id="plane">
            <span id="elrefl">CSS3 Reflection<span id="refl">CSS3 Reflection</span></span>
        </div>
    </body>
</html>

CSS

html {
    height: 100%; 
}
body {
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100%;
}
p {
    line-height: 1.2;
}
#plane {
    padding-top: 5%;
    left: 0;
    top: 10%;
    width: 100%;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}
#elrefl, #refl {
    color: #004;    
    font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 50px;
    background-color: #FFE;
    font-weight: bold;
    padding: 30px;
    display: inline-block;    
    border-radius: 30px;
    box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    border-radius: 30px;    
    position: relative;
        -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#refl {
    position: absolute;
    z-index: -1;
    
    top: 100%;
    left: 0;
    
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
  
    /*filter: url(filter.svg#blur); FF, Opera + IE10*/

     -webkit-filter: blur(2px); /* webkit */    
    -webkit-box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
    -moz-box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
    box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}


.modern #refl {
    opacity: .25;
}
.ie9 #refl {
    margin-top: 20px;
    margin-left: -10px;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
    margin-top: -20px;
    margin-left: -7px;
    
    filter:...