Juin 082011

Here’s a tip you can use to create CSS reflections. It allows you to reflect HTML blocks : images, tables, multiline text…
It works in Firefox, Chromium, Internet Explorer 6+… not sure about IE9, leave me a comment if it doesn’t.
Maybe you should just watch the demo
Here is the relevant part of the code i use in the demo :
CSS
.container { width: 230px; position: relative; } .mirror { overflow: hidden; position: relative; } .mirror span.text { -moz-transform: scaleY(-1); /* Gecko */ -o-transform: scaleY(-1); /* Opera */ -webkit-transform: scaleY(-1); /* webkit */ transform: scaleY(-1); /* standard */ opacity: 0.3; filter: FlipV Alpha(opacity=30); /* IE 6/7/8 */ zoom: 1; display: block; } .mirror img.grad { position: absolute; z-index: 1; width: 100%; height: 100%; height: expression(this.parentElement.offsetHeight + 'px'); /* awful! */ }
HTML
<div class="container"> <!-- here the code you want to reflect --> <div class="mirror spacer"> <img class="grad" src="http://nocturne-jdr.fr/demo/grad.png"> <span class="text" ><!-- repeat here the code you want to reflect --></span> </div> <br class="spacer"> </div>