Aggiungi un'ombra esterna al testo trasparente con CSS

Question

C'è un modo per aggiungere un'ombra esterna a testo trasparente in modo che lo sfondo dietro il testo rimanga visibile? Forse un modo per usare il testo stesso come maschera? O una modalità di fusione del testo (con ragionevole supporto per browser incrociati)?

Il mio tentativo ingenuo:

span { 
 
    background-image: url(http://i.imgur.com/EWDVnfb.png); 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
    font-size: 100pt; 
 
    font-weight: bold; 
 
    line-height: 2em; 
 
    padding: .5em; 
 
    text-shadow: 0 0 .5em #F00; 
 
}

<span>Test</span>

Answer 1

Ecco una soluzione che funziona su Chrome e Safari:

Fiddle

In sostanza, l'idea è quella di avere 2 div overplayed l'uno sull'altro. Quello inferiore fornisce lo sfondo e l'ombra. E il div sopra utilizza solo una maschera per tagliare lo stesso testo esatto da l'immagine di sfondo, in modo da coprire il testo dell'elemento inferiore, ma non l'ombra:

div { 
    position:absolute; 
    top:0; 
    left:0; 
    background-image: url(http://i.imgur.com/EWDVnfb.png); 
    font-family: sans-serif; 
    font-size: 100pt; 
    font-weight: bold; 
    line-height: 2em; 
    padding: .5em; 
} 
div.shadow { 
    color: #fff; 
    text-shadow: 0 0 .5em #F00; 
} 
div.text { 
    -webkit-text-fill-color: transparent; 
    -webkit-background-clip: text; 
} 

EDIT

Ho appena trovato un wonderful article on css-tricks.com Quindi, sembra esserci una soluzione con un supporto browser molto migliore. L'idea è quella di sostituire il div top-strato per e SVG contenente lo stesso testo e utilizzare un modello per riempire il testo l'immagine di sfondo, ecco un abbozzo:

<div class="shadow">Test</div> 
<div> 
    <svg width="400" height="200"> 
     <pattern id="mask" patternUnits="userSpaceOnUse" 
      width="400" height="200" viewbox="0 0 400 200"> 
      <image xlink:href="..." width="300" height="300" /> 
     </pattern> 
     <text x="0" y="1em">Test</text> 
    </svg> 
</div> 

CSS (oltre al CSS del mio sopra soluzione):

text { 
    fill:url(#mask); 
} 

ho cercato di ottenere questo lavoro pure, con parziale successo. (DEMO) Ma non sono molto bravo con svg e qualcun altro potrebbe riuscire a risolverlo. Ad ogni modo, la debolezza qui è che posizionare questo correttamente e in modo affidabile è un vero dolore mentre si ottiene automaticamente con la soluzione solo Webkit.