In this case, we are going to use the text-shadow property that is currently supported by Firefox, Opera, and Safari to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.
The Effect We Are Going To Create
If you look at this image and text treatment you will see what we are trying to achieve. Through color and slight shading, it creates the appearance that the text has been pushed inward into the background. Previously we would have had to create this effect in an image, however now we can do it simply by using the text-shadow property (despite its primary use being designed for creating a relief effect).
Step 1. Primary Text Color
The first step is to make the text we are working with a darker shade of the background that it will be sitting on. This will make it look further away to users and shadowed from the light, how dark it should be will depend on the colors you are using. I recommend mocking up your text in photoshop to get the right shade and tone.
Step 2. Ridge Color
To really get the inset 3D effect we need to have a thin line of shading around our text to create the illusion of a ridge. By having it below the text where it normally will be a shadow, it will create the illusion of depth. The color should be the lighter shade of the background, but not too much lighter. This is another situation where picking the right color is critical, if it is too light it looks strange and if it is too dark you won’t be able to see it. You may want to use photoshop to try mockup up the text in order to pick the right color.
UPDATE: Might be easier to use an rgba(255,255,255,.75); instead
Step 3. The Code
text-shadow: 1px 1px 0px #bad3ed;
The code is very simple, we are just using the text-shadow property to put a 1-pixel line on the text 1 pixel below it, and 1 pixel to the right.
Here is an example of the result. If a user doesn’t have a browser that supports the text-shadow property they still see and can read the text with no issues!