CSS "затонувший" / "вставной" эффект письма без использования изображения

Question

Как эффект «затонувший» или «вставка» применяется к этим буквам в этом меню? Я посмотрел (кратко) с Firebug, но не могу найти, как они это делают. Работает в FF, а не в IE.

См. http://balsamiq.com/products/mockups/mybalsamiq для реального примера.

Answer 1

Это просто Text Shadow с цветом светлее фона, а не темнее, что делает его похожим на скос.(Мы научились полагать, что «солнечный свет» на экране компьютера обычно исходит из верхнего левого угла.)

Правило CSS, показанное при использовании инструментов разработчика для Safari, показывает:

text-shadow: white 0px 1px 0px;

Answer 2

Это, скорее всего, text-shadow:

p {
    text-shadow: 0 1px 0 #fff;
}

Ни одна из существующих версий IE (даже бета-версия IE9) не поддерживает text-shadow.

Answer 3

Вот так:

text-shadow: 0 1px 0 #FFFFFF;

Answer 4

Вот небольшой трюк, который я обнаружил, используя псевдоэлементы :before и :after:

http://dabblet.com/gist/1609945

Answer 5

Как я вижу, именно сочетание цветов создает эффект.Просто измените текст на красный, и текст больше не вставляется.