О да, я их прокурил так что уж ничего и не видно сквозь никотин налипший на их писанину :D

а кто против? )

devote, тебе открылись тайные знания? Был у меня один такой случай, что без подключения htc не обойтись, но сейчас уже не вспомню.

Ну, вот моя попытка. Всё свелось к аналогии с 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>

А теперь начну мешать сюда грязный код. Пример для браузеров, поддерживающих 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>

melky,
Всё нормально за исключением того, что это не картинка и ты потерял закругленные углы и градиент. Ну и кроссбраузерность обязательна. И я напомню, что картинка берется изначально с острыми углами.

закруглённые углы? там отражение является точной копией отражаемого элемента, с добавлением ещё одного класса... как мог стиль потеряться? Недавно появившееся свойство element должно помочь.

картинка... да. её придётся wrap'ать, а дальше то же самое :
FIREFOX ONLY; При клике откроется пример на jsbin.

Тут уже намного сложнее.

Ну вот-с решение на SVG Mask (FIREFOX ONLY). Нажать - откроется пример.


PS Надеюсь, Вы не против того, что я использовал ваш аватар для теста :)

Исходник такой:

То, что ты показываешь совсем другое решение. Выше видно, что должно получиться.

VML же?

Угу. Как-то так :

Было :


Стало (клик-пример):


... для оперы ещё придётся ставить пару свойств для округления картинки, а исчезающий градиент в голове не появляется.

Угу, но тема про IE.

Это всё должно работать в IE7, IE8. Я уж молчу про то, что оно должно менять размеры и летать по экрану и не разваливаться на лету. Ну а так, да, че сложного?!

Ась?

Я не пробовал, но судя по документации это можно сделать в IE через VML. Рисуем прямоугольник нужных размеров со скругленными углами (roundrect
), а внутрь помещаем элемент fill с атрибутом src и type="tile". Так нарисуем верхнее изображение.
Нижнее изображение можно сделать фильтрами (если получится, должно), хотя на счет градиента не уверен. Смотря на каком фоне это всё должно летать.