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
Podemos lograr un efecto de grabado de texto parecido al que iPhone de distintas maneras:
Texto claro en un degradado oscuro
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
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