텍스트 그림자가 그라디언트 클립 배경 뒤가 아님

Question

그라데이션 채우기를 클립과 함께 사용하기위한 로고를 얻고 그 뒤에 텍스트 그림자를 배치하려고합니다. 그러나 그림자는 항상 맨 위에 놓여있는 것처럼 보입니다.

분명히 SVG 등에서이 작업을 수행 할 수 있지만 다른 이유로는 CSS로 수행하고 싶습니다.

나는

Answer 1

. 미리.

감사를

이 도와주세요 바이올린 "http://jsfiddle.net/Mgz6H/을 만든 나는 깊이 Z- 인덱스를 사용하고 절대 만들었습니다 그림자 div 요소. 는 업데이트 된 코드 here

CSS

,617을 확인하시기 바랍니다

.logo-shadow { 
    position:absolute; 
    top:0; 
    left:0; 
    text-shadow:3px 3px 3px black; 
    color:transparent; 
    z-index:0; 
} 

HTML

<div id="logo-container"> 
    <div class="logo"> 
     <span>Light</span> 
     <span id="swap">Meter</span> 
     <span id="me">.com</span> 
    </div> 
    <div class="logo-shadow"> 
     <span>Light</span> 
     <span id="swap">Meter</span> 
     <span id="me">.com</span> 
    </div> 
</div>​