Aqui está minha melhor tentativa:
.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>
O problema é como recortar a sombra que vaza nas bordas !!! Tentei no webkit usando background-clip: text, mas o webkit renderiza a sombra acima do fundo, então não funciona.
Fazendo uma máscara de texto com CSS?
Sem uma camada de máscara superior, é impossível fazer uma sombra interna verdadeira no texto.
Talvez alguém deva recomendar que o W3C adicione background-clip: reverse-text , que cortaria uma máscara através do fundo em vez de cortar o fundo para caber dentro do texto.
Faça isso ou renderize a sombra do texto como parte do fundo e recorte-a com background-clip: text.
Tentei posicionar absolutamente um elemento de texto idêntico acima dele, mas o problema é o background-clip: o texto corta o fundo para caber dentro do texto, mas precisamos do inverso disso.
Tentei usar o traço de texto: 20px branco; neste elemento e no acima dele, mas o traço de texto entra e sai.
Métodos Alternativos
Como atualmente não há como fazer uma máscara de texto invertido em CSS, você pode usar SVG ou Canvas e fazer uma imagem de substituição de texto com as três camadas para obter o efeito.
Como o SVG é um subconjunto do XML, o texto SVG ainda seria selecionável e pesquisável, e o efeito pode ser produzido com menos código do que o Canvas.
Seria mais difícil conseguir isso com o Canvas porque ele não tem um dom com camadas como o SVG.
Você pode produzir o SVG no lado do servidor ou como um método de substituição de texto javascript no navegador.
Leitura adicional:
SVG versus Canvas:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Recorte e máscara com texto SVG:
http://www.w3.org/TR/SVG/text.html#TextElement
