Как сделать полупиксельную тень с правильным отображением браузера?

Question

[VladimirMelnik]

Имеется текст. Имитация объема достигается за счёт полупиксельных теней на тон ниже по цвету, смещенных по Y. Но при отображении в браузере появляется лесенка. На картинке вариант с тенью и без тени

Как можно убрать лесенку и вернуть нормальное сглаживание?
https://jsfiddle.net/gu3v2dfr/

Comments

[Kovalsky]

Не это?

[VladimirMelnik]

Никита Полевой: Дело не в сглаживание шрифта, а в сглаживании тени на пол пикселя, с которыми браузер отказывается дружить

[twobomb]

Странно, но у меня похоже нету лесенки

[AlexKeller]

VladimirMelnik: пример на jsfiddle можно?

[VladimirMelnik]

AlexKeller: https://jsfiddle.net/gu3v2dfr/

[VladimirMelnik]

twobomb: https://jsfiddle.net/gu3v2dfr/

[AlexKeller]

VladimirMelnik: боже, 50 теней на 1 блок, это выше моих сил

[VladimirMelnik]

AlexKeller: Есть еще идеи как сделать 3д текст?

[Kovalsky]

VladimirMelnik: конечно. То есть по ссылке других вариантов особенно нет, но зато там можно увидеть как тот же эффект достигается в разы меньшим количеством теней и упомянутая проблема с антиалиазингом отсутствует.

Answer 1

[Михаил Захаров]

К своим теням припиши еще вот это:
1px 0px 0px #fff, -1px 0px 0px #fff
Если не поможет, то поиграйся с

text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;

Answer 2

[xmoonlight]

Размер основного текста (font-size) ЖЕЛАТЕЛЬНО делать кратным 2-м.
Конечные ("листовые") элементы (тени, окантовка и т.д.) - необходимо делать любыми ЦЕЛОЧИСЛЕННЫМИ (НО не дробными!).
Иначе - будет "лесенка".