Se puede hacer un efecto de texto grabado (donde el texto aparece más bajo que la superficie) con la propiedad text-shadow de CSS3
See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.
See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.
See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.
Explicación
Los parámetros de text-shadow se enumeran a continuación en el orden en que deben aparecer en su CSS.
Desplazamiento Horizontal
Para este efecto, dejar el desplazamiento horizontal en 0 permite que la sombra provenga de una sola dirección (verticalmente), lo que proporciona una apariencia más limpia y un mejor efecto.
Desplazamiento vertical
Cuando se usa el texto más oscuro sobre un fondo medio, por lo general funciona mejor usar una sombra más clara que provenga de abajo. Esto hace que el texto parezca más bajo que la superficie. Al usar colores más claros, una sombra más oscura que viene de arriba, da el mismo efecto. Hacer que la sombra venga desde arriba se logra usando un -1 en el Desplazamiento vertical.
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
Radio de desenfoque
No desea ningún desenfoque en la sombra para este efecto, por lo que el valor es 0.
Color
El último valor es el color de la sombra. Estoy usando colores RGBA, que es una combinación de los valores R, G y B (puede obtenerlos del selector de color de Photoshop) y la transparencia alfa. Todos los navegadores que admiten la sombra de texto también admiten valores RGBA.
No necesita usar valores RGBA; en su lugar, podría probar un color gris oscuro medio en este ejemplo. Sin embargo, usar transparencia para la sombra permitirá que parte del color original brille y, en general, proporcionará un efecto más agradable. Esto es especialmente útil cuando utiliza este efecto en los colores.
Sombras en dos partes
A veces puede obtener resultados aún mejores utilizando dos sombras de texto en el texto: una sombra oscura y una sombra clara. Puede especificar dos sombras diferentes en sus elementos separándolas con una coma. Descubrí que, por lo general, no son necesarias dos sombras cuando se usan grises, pero pueden ser útiles con los colores.
El tercer ejemplo en color tiene solo una sombra:
text-shadow: 0px 1px 0px rgba(255,255,255,.5);
En el cuarto ejemplo, utilicé dos sombras y diferentes opacidades, con mejores resultados.
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
Compatibilidad con navegador
Esto funciona en todos los navegadores modernos. No funciona en IE9 y versiones anteriores.
Hay una propiedad de filtro que se puede usar en Internet Explorer, que a veces funciona, pero a veces produce resultados desagradables. Puede experimentar y tratar de encontrar algunos valores que funcionen.
Si desea leer más sobre el uso de sombras de IE para intentar que funcione, pruebe estos artículos: Sombra paralela en todos los navegadores y generador RGBA de IE
Para ser compatible con los navegadores IE, debe elegir entre lo siguiente:
1. Asegúrese de que el texto se vea bien sin el efecto de inserción. Esto significa asegurarse de que haya suficiente contraste entre el color del texto y el color de fondo.
2. Cree una imagen de sus encabezados de texto insertados y aplíquelos como imágenes de fondo en una hoja de estilo específica solo para IE. Si hace esto, puede decidir omitir la solución CSS por completo. Sin embargo, las soluciones CSS significan menos imágenes para descargar, por lo que hay un ahorro por usar CSS cuando se puede.
3. Intente usar los comandos de filtro para IE, pero asegúrese de enviar un mensaje de texto y ver si las cosas todavía se ven bien.
https://css-snippets.com/engraved-text/