Este es mi mejor intento:
.inner_shadow {
color:transparent;
background-color:white;
text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
font-family:'ProclamateHeavy'; // Or whatever floats your boat
font-size:150px;
}
<span class="inner_shadow">Inner Shadow</span>
¡El problema es cómo recortar la sombra que sangra alrededor de los bordes! Probé en webkit usando background-clip: text, pero webkit muestra la sombra sobre el fondo para que no funcione.
¿Hacer una máscara de texto con CSS?
Sin una capa de máscara superior es imposible hacer una verdadera sombra interior en el texto.
Quizás alguien debería recomendar que el W3C agregue background-clip: reverse-text , que cortaría una máscara a través del fondo en lugar de cortar el fondo para que quepa dentro del texto.
O eso o renderiza la sombra de texto como parte del fondo y recórtala con background-clip: text.
Intenté colocar absolutamente un elemento de texto idéntico encima de él, pero el problema es clip de fondo: el texto recorta el fondo para que quepa dentro del texto, pero necesitamos lo contrario.
Intenté usar el trazo de texto: 20px blanco; tanto en este elemento como en el que está encima, pero el trazo del texto entra y sale.
Métodos alternativos
Dado que actualmente no hay forma de crear una máscara de texto invertido en CSS, puede recurrir a SVG o Canvas y hacer una imagen de reemplazo de texto con las tres capas para obtener su efecto.
Dado que SVG es un subconjunto de XML, el texto SVG aún se podría seleccionar y buscar, y el efecto se puede producir con menos código que Canvas.
Sería más difícil lograr esto con Canvas porque no tiene un dom con capas como lo hace SVG.
Puede producir el SVG en el lado del servidor o como un método de reemplazo de texto de JavaScript en el navegador.
Otras lecturas:
SVG versus lienzo:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Recorte y enmascaramiento con texto SVG:
http://www.w3.org/TR/SVG/text.html#TextElement
