그래디언트 배경에 그림자가있는 텍스트 그라디언트를 수행하려면 어떻게합니까?

Question

는 여기에 내가 CSS에서 해낼 필요가 무엇 (그것이 정말 추한하지만, 예를 들어 아니라 내 문제를 보여줍니다) :

우리는에 그림자와 텍스트를 통해 그라데이션있어 약간의 그라디언트가있는 배경.

나는 내가 찾을 수있는 모든 방법을 시도했다.

This method은 텍스트 그림자와 함께 작동하지 않습니다.

단색 배경이 없기 때문에 PNG 오버레이 방법이 작동하지 않습니다.

This method은 CSS에 텍스트 문자열을 삽입해야하므로 텍스트가 동적이되기 때문에 작동하지 않습니다.

그래서 나는 혼란 스럽습니다.

모든 브라우저에서 작동 할 필요는 없습니다 (필요한 경우 Internet Explorer를 무시해도됩니다.). Webkit 브라우저에서만 작동한다면 괜찮을 것입니다.

대답해야

Answer 1

:

HTML

<h1><span>Filthy</span></h1> 

CSS

h1 { 
    position: relative; 
    font-size: 300px; 
    line-height: 300px; 
    text-shadow: -3px 0 4px #006; 
} 
h1 span { 
    position: absolute; 
    top: 0; 
    z-index: 2; 
    color: #d12; 
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
} 
h1:after { 
    content: attr(cssFilthyHack); 
    color: #000; 
    text-shadow: 3px 3px 1px #600; 
} 

JS

,

---

중요한 것은 h1 텍스트에서 텍스트를 추출 할 content: attr(cssFilthyHack);을 사용하는 것입니다. 이

<h1 cssFilthyHack="Filthy"><span>Filthy</span></h1> 

처럼 HTML의 텍스트를 두 번 추가 할 수 있습니다 또는 당신은이 작업을 자동으로 수행 할 JS의 jQuery를 방법을 사용합니다.

---

UPDATE

스팬으로 태그를 대체 JS 기능을 추가했다.

작업에서 여기에 예를 참조하십시오 http://jsfiddle.net/alligator/Gwd3k/