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 :


.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! */


<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>
    <br class="spacer">

 Laisser un commentaire

Vous pouvez utiliser ces tags et attributs HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.