CSS複数のグラデーションテキスト。 -webkit-background-clip

私のテキストにグラデーションを生成するのにCSSを使用しています...私のテキストは複数行になっているので、各行でグラデーションがリセットされません...段落全体が1巨大になります勾配！私の仕切りのテキストの各行に個別の勾配効果を与えることはできますか？ここに私のコードは次のとおりです。CSS複数のグラデーションテキスト。 -webkit-background-clip

<html> 
<head> 
<style type='text/css'>p.p1 { 
    margin: 0.0px 0.0px 0.0px 50.0px; 
    font: 50.0px Helvitica; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    } 
</style> 
</head> 
<body bgcolor='#FFFFFF'> 
<div style='word-wrap: break-word;'> 
<p class='p1'> 
<font face='helvetica' color='#000000'> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id vestibulum lectus. Maecenas facilisis orci vitae urna pulvinar cursus. Etiam id laoreet metus. Cras vitae elit ipsum. Donec a sagittis nisi. Sed nec nisi nibh, fringilla fermentum quam. Vestibulum lorem felis, gravida et faucibus ac, ultrices nec lectus. 
</font> 
</p> 
</div> 
</body> 
</html>

出典

2012-01-28 Albert Renshaw

は、私は非推奨タグを取り除くとあなたのためのコードのアップをきれいにしまった。..

p.p1 { 
    margin: 0 0 0 50px; 
    font-size: 50px; 
    font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica, Arial', 'Lucida Grande', 'sans-serif'; 
    background: -webkit-repeating-linear-gradient(top, red 0px, blue 60px); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    }

Demo

出典

2012-01-28 17:56:00 bookcasey

VERY NICE！ありがとうございました！ :) –

ウェブキットでのみ動作します –

CSS複数のグラデーションテキスト。 -webkit-background-clip

答えて

関連する問題