web-dev-qa-db-ja.com

純粋なCSS3テキストの色のグラデーション-可能ですか？

クロスブラウザの純粋なCSS3テキストカラーグラデーションを作成する方法はありますか？

したがって、PNGはありません。 「Webkit」のみではありません。

EDIT：より正確には：CSS3のみであり、ボックスグラデーションではなくテキスト用です。

EDIT：見つけましたこのソリューション、ただし、Webkit専用です。

colorscss3gradient
27
Kriem

現在、Webkitのみに background-clip：text があり、 this-extension to background-clip は標準化されていないため、Webkitの外部でこれを行うクロスブラウザの方法はありません（私が知る限り）。 CSS3の要件を緩和したい場合は、Canvas（またはSVG）を使用して同じ効果のクロスブラウザーを実現できますが、HTML5対応ブラウザーについてのみ話します。

13
Michael Mullany

現時点では「純粋な」CSSの方法はありませんが、CSSとコンテンツのいくつかの複製を使用する方法があります。 私のサーバーサイドのCSSグラデーションテキストソリューションはこちら を参照してください。これはJavaScriptやバックグラウンドを必要としません。 JavaScriptを使用してこのクライアント側を実行することもできます。Dragonlabsが行ったことを確認してください here 。

5
Gus T Butt

ZzzzBovの応答のコメントとして既に指摘したように、CSS3のみでテキストグラデーションを実現する方法があります。

PNGソリューション をさらに進めると、css3グラデーションで同じトリックを行うことができます。

もちろん、これは均一な背景色のテキストに対してのみ機能します。

0
enyo

現時点での最善の解決策は、Webkit以外のフォールバックとして無地を使用してから、次の手法を使用することです（webkitが必要です）。

h1 {
  color: $333;
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
<h1>Example</h1>
0
sean2078