2011-12-05 4 views
11

私は周りを見回しており、これについて何も見つかりませんでした。cssテキストグラデーション

テキストの段落がある場合は、CSS3を使用して徐々にテキストの色をページに変更する方法がありますか?テキストの全段落ではなく単語上でのみ行うので、グラデーションが行う方法ではなく、

だから、テキストが白から始まり、段落の終わりになるにつれて黒くなることを願っています。

私は本当にそれができることを確信していない...多分それを行うことができるJavaスクリプトがあります。

ありがとうございました。

答えて

9

あなたはCSSを使ってそれを行うことができますが、それは唯一のWebKitブラウザ(ChromeとSafariなど)で動作します:クロスブラウザのテキストグラデーションのhttp://jsfiddle.net/joshnh/DphXz/

+1

すごいです....しかし、そのような恥を唯一のWebkitブラウザ....私はIEとFirefoxの周りの任意の回避策があるのだろうか?それに感謝します。 – ragebunny

+0

うまくいけば、他のブラウザもこれらの機能を実装し始めますが、それまでは不幸にもWebkitしかありません。 – joshnh

1

私はそれがミックスブレンドモードのCSSプロパティをサポートしていませんので、しかし、それは、IEで動作しない、純粋なCSSに似た何かをすることができました: http://caniuse.com/#feat=css-mixblendmode

コードスニペットは以下の通りです。誰かを助けることを願っています。

<html> 
<head> 
<style> 
.gradient { 
    position: relative; 
    content: ''; 
    display: block; 
    width: 260px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(140,198,63,1)), color-stop(100%, rgba(30,71,146,1))); 
    background: -webkit-linear-gradient(left, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background: -moz-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -ms-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:  -o-linear-gradient(right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
    background:   linear-gradient(to right, rgba(140,198,63,1) 0%, rgba(30,71,146,1) 100%); 
} 
.gradient p { 
    color: #000; 
    background: #fff; 
    mix-blend-mode: lighten; 
} 
</style> 
</head> 
<body> 
    <div class="gradient"> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    </div> 
</body> 
</html>