[melky]

Ну, вот моя попытка. Всё свелось к аналогии с box-shadow: клонировали элемент, и добавили копии эффектов. Эффекты такие: поворот (на 180 градусов), ревёрсинг (отражение справа налево), и размытие. Последнее достигается сложновато в опере и файрфоксе.

Я разделю пример на несколько, чтобы было удобней писать читать код.

Начну с классического вида элемента, без отражения.

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
</style>
<div class="mirrorize">
    Mirrorize me.
</div>

БЫЛО БЫ НЕПЛОХО ДОБАВИТЬ ОТРАЖЕНИЮ USER-SELECT: NONE. Но я последую принципу "работает - не трожь" (мне просто лень ).

А теперь начну мешать сюда грязный код. Пример для браузеров, поддерживающих CSS Filters (у меня только хром):

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
.reflection {
    position: absolute;
    width: 100%;

    left: 0;
    padding: 0;
    margin: 0;

    top: 105%; /* outer высота + отступ */

    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);

    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}
</style>
<div class="mirrorize">
    Mirrorize me.
    <div class="reflection mirrorize">Mirrorize me.</div>
</div>

Теперь решение для IE:

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
.reflection {
    position: absolute;
    width: 100%;

    left: 0;
    padding: 0;
    margin: 0;

    top: 105%;

    /*IE 5.5 - IE 7*/
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
    
    /*IE8 вроде как.*/
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";
}
</style>
<div class="mirrorize">
    Mirrorize me.
    <div class="reflection mirrorize">Mirrorize me.</div>
</div>

Ну а теперь решение для браузеров, поддерживающих CSS Transformations, но не поддерживающих CSS Filters - т.е. размытие. На ум мне пришло SVG.

В ОПЕРЕ НЕ РАБОТАЕТ. ЖАЛЬ. Можно было бы сделать размытие в канвасе (слыхал про такое), но я канвас ни разу не трогал, и в ближайшее время даже не собираюсь.

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
.reflection {
    position: absolute;
    width: 100%;

    left: 0;
    padding: 0;
    margin: 0;

    top: 105%;

    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);

    filter: url(#reflection_blur);
}
</style>

<svg>
    <defs>
        <filter id="reflection_blur">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </defs>
</svg>

<div class="mirrorize">
    Mirrorize me.
    <div class="reflection mirrorize">Mirrorize me.</div>
</div>