Hay muchas técnicas de grabar un texto. Apple utiliza mucho esta técnica últimamente, por ello queremos enseñarla para que la podáis usar. Existen varios tipos:

Grabado de texto estilo iPhone

grabado-texto-css-2

Podemos lograr un efecto de grabado de texto parecido al que iPhone de distintas maneras:

Texto claro en un degradado oscuro

grabado-texto-css-3

Para un texto claro en un degradado oscuro, generalmente se utiliza la propiedad text-shadow de -1px en la coordenada y, con un color de sombra oscuro. Este es el código por el que se define el ejemplo de arriba:

text-shadow: 0px -1px 0px #374683;

Texto oscuro en un degradado claro

grabado-texto-css-4

Si elegimos el caso contrario, la propiedad text-shadow tendrá un valor positivo de 1px en la coordenada x, con una sombra clara. Este es el código del ejemplo de arriba:

text-shadow: 0px 1px 0px #e5e5ee;

Soporte de exploradores

Desafortunadamente solo Opera 9.5+, Safari 1.1+, Konqueror 3.4+ y iCab 3.0.3+ soportan la propiedad text-shadow. Las últimas betas de Firefox 3.1 lo están empezando a soportar.

También puedes hacer que este grabado de texto funcione en IE 7. Nos fijaremos en el 2º ejemplo que hemos puesto para que sea compatible con IE 7:

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

Aunque si lo deseamos podemos ver como obtener sombras sin necesidad de usar text-shadow.

Vía | Reynoldsftw