Ecco il mio miglior tentativo:
.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>
Il problema è come ritagliare l'ombra che sanguina attorno ai bordi !!! Ho provato in webkit usando background-clip: text, ma webkit rende l'ombra sopra lo sfondo in modo che non funzioni.
Creare una maschera di testo con CSS?
Senza un livello maschera superiore è impossibile creare una vera ombra interna sul testo.
Forse qualcuno dovrebbe raccomandare al W3C di aggiungere un clip di sfondo: testo inverso , che taglierebbe una maschera attraverso lo sfondo invece di tagliare lo sfondo per adattarlo al testo.
O quello o renderizza l'ombra del testo come parte dello sfondo e ritagliala con background-clip: text.
Ho provato a posizionare assolutamente un elemento di testo identico sopra di esso, ma il problema è il clip di sfondo: il testo ritaglia lo sfondo per adattarlo al testo, ma abbiamo bisogno del contrario.
Ho provato a usare il tratto di testo: 20px bianco; sia su questo elemento che su quello sopra di esso, ma il tratto di testo va dentro e fuori.
Metodi alternativi
Poiché attualmente non è possibile creare una maschera di testo invertito in CSS, è possibile passare a SVG o Canvas e creare un'immagine di sostituzione del testo con i tre livelli per ottenere il proprio effetto.
Poiché SVG è un sottoinsieme di XML, il testo SVG sarebbe comunque selezionabile e ricercabile e l'effetto può essere prodotto con meno codice di Canvas.
Sarebbe più difficile ottenere questo risultato con Canvas perché non ha un dominio con livelli come SVG.
È possibile produrre SVG sul lato server o come metodo di sostituzione del testo javascript nel browser.
Ulteriori letture:
SVG contro Canvas:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Ritaglio e mascheratura con testo SVG:
http://www.w3.org/TR/SVG/text.html#TextElement
