How is this font implemented to be engraved?

Question

Hi, I'm looking at http://agilewebsolutions.com/support. As you can see, the text h2 and h3 all have an engraved effect giving it a 3d look. How is this accomplished? I couldn't dig it out of the code. Any help would be appreciated.

Answer 1

That is done with the CSS3 effect text-shadow. See here for more info. IE still does not support most CSS3 properties though.

Answer 2

The h1 uses text-shadow:0 -1px 0 #000000; as it is a light text on a dark background.

The h2 uses text-shadow:0 1px 0 #FFFFFF; which is the exact inverse of the one above. support.css (line 47)

However both look engraved because of the use of light text on dark bg + dark text on light bg.