<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>
Simple<strong>;</strong>
Subtle<strong>;</strong>
<h2 class="text-reflect">
CSS Reflect
</h2>
</h1>
html, body {
margin-top: 50px;
padding: 0;
box-sizing: border-box;
background: #fff;
color: #22313F;
text-align: center;
}
h1, h2 {
display: inline-block;
width: 100%;
font-family: "Helvetica Neue", "Arial";
font-size: 3em;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 3px;
text-align: center;
}
h1 {
color: #364e65;
text-transform: none;
padding: 0;
margin: 0;
}
/* TEXT-REFLECT CSS */
.text-reflect, .text-reflect:before, .text-reflect span {
display: block;
margin: 0;
padding: 0;
}
.text-reflect, .text-reflect:before, .text-reflect:after {
position: relative;
}
.text-reflect {
top: -60px;
}
.text-reflect:before {
content: 'CSS reflect';
top: 95px;
transform: scale(1, -1);
backface-visibility: visible;
z-index: 1;
}
.text-reflect:after {
content: '';
display: block;
top: -10px;
left: 0;
width: 100%;
height: 60px;
background-image: linear-gradient(to bottom, rgba(255,255,255, .4) 0%, rgba(255, 255, 255, 1) 50%);
z-index: 2;
}
/*
Couple things to note if you want to use/expand on this;
1. The mirror color for x browser compatability needs to be the same base color as the parent element, in this case it's inherited from the background color (white)
2. On dark backgrounds you will want much higher opacity from 0% something like .9
3. The reflection overlay and .text-reflect offset are the same but opposite value, 60 & -60 respectively
4. Setting the height & content on the fly could easily be achieved with a small javascript implementation
*/
