Grabado de texto usando CSS

Si eres diseñador Web y quieres poner un efecto resultón a tus textos (sin abusar, eso sí) fácilmente y usando únicamente CSS te va a interesar éste pequeño truco.

Si el texto que pretendes ‘grabar’ es más claro que el fondo en el que está inmerso, le asignaremos una clase en la hoja CSS, que contendrá esta línea de código:

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

Evidentemente podemos añadir también eso al atributo style=”" en el código HTML, pero añadiendolo a la hoja CSS nos ahorramos futuros errores (y aligeramos la página un poco si vamos a usarlo más de una vez).

Para el caso contrario (texto más oscuro que el fondo), usaremos la siguiente línea:

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

Desgraciadamente, eso sí, muchos navegadores no soportarán éste tipo de efectos (los que lo soportan plenamente vienen a ser los basados en Webkit y KHTML, Opera 9.5+ y la última versión de Mozilla Firefox). Aunque para Internet Explorer 7 hay un truco interesante (y propietario), consistente en la siguiente línea de código en el CSS:

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

Aunque usarla ya supone usar comentarios condicionales o distintas hojas de estilo para distintos navegadores, lo cual no hace otra cosa que entorpecer al diseñador.

Via | CSSBlog