In this post I'm going to show you how to create a pure CSS reflection effect on text using some recent features of CSS3, namely transformations and opacity. There's nothing difficult with this approach, but at the moment of this writing CSS3 transformations are supported only through vendor-specific extensions. Here's our markup:
<h1>Test <span>Test</span></h1>
And here's our CSS:
h1 {
font: normal 6em Impact, sans-serif;
width: 400px;
height: 250px;
margin: 10px auto 0 auto;
color: #333;
}
h1 span {
color: #999;
display: block;
width: 170px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
opacity: 0.3;
position: relative;
top: -37px;
}
We've applied a rotation of 180 negative degrees on the shadow element to create the peculiar effect of reflection. Note that also the opacity of the element has been changed. You can see a demo below.
This doesn't look like a reflection, just a rotation. The upside-down text is not reflected across the horizontal axis; the letters don't line up underneath their equivalents.
Yes, that's right. There are some couple of Webkit-specific extensions to reflect the content of a box, but I don't remember the names. This is actually a rotation, as you correctly point out. Ah, here it is: http://www.webkit.org/blog/182/css-reflections/, but it's not cross-browser :-(