[en] CSS reflection (cross-browser, images AND text, multiline)

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>