Very often we see the text reflection in many websites which gives a very fresh look to the text as well as to that website.So in this tutorial we will cover a basic technique of flipping the text vertically to make it look like a reflection.
Text-Reflection
Use the :after and :before pseudo-elements to insert the reflection. The trick here is to flip the reflected-text vertically. This can be achieved with a CSS 2D transformation. The right way is to simply use a negative value for scaley.
BASIC HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> text reflection</title>
<style>
.reflected {
position: relative;
font-size:130px;
font-family:sans-serif;
margin-left:100px;color:#666
}
.reflected:before, .reflected:after {
display: block;
position: absolute;
bottom: -94px;
left: 0px;
right: 0;
}
.reflected:before {
content: 'MY REFLECTION';
opacity: .8;
-webkit-transform: scaleY(-1.1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
}
.reflected:after {
background:-webkit-gradient(
linear,left top,left bottom,
from(rgba(255,255,255,0.1)),
to(rgba(255,255,255,1)));
content: '';
height: 2em;
}
</style>
</head>
<body>
<h1 class="reflected">MY REFLECTION</h1>
</body>
</html>
