CSS "sunken"/"inset" letter effect without using image

How is the "sunken" or "inset" effect applied to these letters in this menu? I looked (briefly) with Firebug but can't find how they're doing it. Works in FF, no开发者_如何学Pythont in IE.

See http://balsamiq.com/products/mockups/mybalsamiq for actual example.

This is just a Text Shadow with a color lighter than the background instead of darker, causing it to look like a bevel. (We've been trained to believe that the 'sunlight' on a computer screen generally comes from the upper left corner.)

The CSS rule shown when using the Developer Tools for Safari shows:

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

That is most likely a text-shadow:

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

No version of IE in existence (not even IE9 beta) supports text-shadow.

It's this:

text-shadow: 0 1px 0 #FFFFFF;

As I see, it's the color combination that create the effect. Just change the text to red color and the text is not inset anymore.

Here's a little trick I discovered using the :before and :after pseudo-elements:

http://dabblet.com/gist/1609945