An engraved text effect (where text appears lower than the surface) can be done with the CSS3 property text-shadow.
The parameters of text-shadow are listed below in the order they must appear in your CSS.
For this effect, leaving the horizontal offset at 0 allows the shadow to come from one direction only (vertically) which provides a cleaner look and better effect.
When using the darker text on a medium background, it usually works best to use a lighter shadow coming from below. This makes the text look like it is lower than the surface. When using lighter colors, a darker shadow coming from above, gives the same effect. Making the shadow come from above is achieved by using a -1 in the Vertical offset.
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
You don’t want any blur on the shadow for this effect, so the value is 0.
The last value is the color of the shadow. I am using RGBA colors, which is a combination of the R, G, and B values (you can get these from the Photoshop Color Picker) and the Alpha Transparency. All browsers that support text-shadow also support RGBA values.
You don’t need to use RGBA values; you could try a medium-dark grey color in this example instead. However, using transparency for the shadow, will allow some of the original color to shine through and generally provides a nicer effect. This is especially useful when you are using this effect on colors.
Two Part Shadows
You can sometimes get even better results by using two text-shadows on the text – one dark shadow and one light shadow. You can specify two different shadows on your elements by separating them with a comma. I have found that two shadows are not usually necessary when using greys, but they can be useful with colors.
The third example in color has just one shadow:
text-shadow: 0px 1px 0px rgba(255,255,255,.5);
In the fourth example, I used two shadows, and different opacities, with better results.
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
This works in all modern browsers. It does not work in IE9 and below.
There is a filter property than can be used on Internet Explorer, that sometimes works, but sometimes produces ugly results. You can experiment and try to find some values that work.
To support IE browsers, you must choose from the following:
- Make sure the text looks fine without the Inset effect. This means making sure there is enough contrast between the text color and background color.
- Create an image of your inset text headers, and apply them as background-images in style sheet specific to IE only. If you do this, you may decide to skip the CSS solution altogether. However, CSS solutions mean less images to download, so there is a savings for using CSS when you can.
- Try using the filter commands for IE, but make sure to text and see if things still look OK.