css - グラデーション クリップの背景の背後にないテキストの影

Question

クリップでグラデーション塗りつぶしを使用するロゴを取得し、その背後にテキスト シャドウを配置しようとしています。しかし、影は常に上に置かれているようですか？

明らかに、これは SVG などで行うことができますが、他の理由で CSS で行いたいと考えています。

フィドルを作成しました "http://jsfiddle.net/Mgz6H/

助けてください。

前もって感謝します。

Answer 1

深度に z-index を使用し、シャドウに絶対 div 要素を作成しました。ここで更新されたコードを確認してください

CSS

.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>​