CSSを使用してテキストのグラデーションカラーを追加する方法

CSSを使用してテキスト要素に線形グラデーションカラーを追加する方法と、一般的なグラデーションの間違いを回避する方法を学びます。

HTMLテキスト要素にグラデーションテキストの色を追加するには、次のCSSプロパティが必要です。

• background
• -webkit-background-clip
• -webkit-text-fill-color

backgroundを使用するのはなぜですか テキストを着色するためのプロパティ？このアプローチは少しハッキーに見えますが、うまくいくことを約束します！

次の2色、オレンジと赤を使用して、テキスト要素に左から右に線形グラデーションを適用する簡単な例を作成しましょう。

HTML

<h2> text-gradientというクラス属性を持つ見出し要素 ：

<h2 class="text-gradient">Gradient text color!</h2>

CSS

.text-gradientにカラーグラデーションスタイルを追加します クラス：

.text-gradient {
  /* Set the background color */
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
  /* Mask the color to the text, and remove the rest  */
  -webkit-background-clip: text;
  /* Make the text fill color value transparent so the masked background color comes through */
  -webkit-text-fill-color: transparent;
}

結果：

グラデーションテキストの色！

いいね！

でも、ちょっと待ってください！

2つの色がテキスト要素にどのように適用されるかに問題がありますか？色が不均一に適用されます。

linear-gradient CSS関数は2つの色の値を取ります：

• #ff8a00 （オレンジ）
• #DD4C4F （赤）

そして、CSSで指定されているように、0から100％まで均等に広がるはずです：

(to right, #ff8a00 0%, #DD4C4F 100%)

だから私たちはこれが欲しい テキスト要素：

しかし、テキストの例はほぼ完全にオレンジ色です：

グラデーションテキストの色！

ヒント：このウェブサイトのカラーテーマをダークモードに切り替えると（月のアイコンをクリック）、見やすくなります。

<h2>が原因で発生します 見出し要素はブロックレベルです デフォルトでは要素。これは、背景が幅全体に及ぶことを意味します 親コンテナの。

これにより、グラデーションクラス（.text-gradient）の色が作成されます。 ）<h2>に追加しました backgroundをターゲットにしているため、要素はテキストの幅を超えて伸びます プロパティ。

私の主張を明確にするために、テキストの例に境界線を追加します：

グラデーションテキストの色！

わかりますか？

テキストのグラデーションは、背景ではなくテキストのみに設定する必要があります（ただし、backgroundを使用する必要があります これを機能させるためのプロパティ）。

これを修正するには、<h2>をオーバーライドする必要があります 要素のデフォルトのdisplay:block inline-blockを追加して設定 代わりに：

.text-gradient {
  background: linear-gradient(to right, #ff8a00 0%, #dd4c4f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

結果：

グラデーションテキストの色！

甘い！違いがわかりますか？これで、2色のグラデーションの赤い部分が50-50で適用されるため、オレンジと同じくらい飛び出します。

ブラウザの互換性

グラデーションカラートリックは、WebKitブラウザーでのみサポートされています。他のブラウザの場合は、通常のCSS colorを使用します プロパティをフォールバックオプションとして使用し、グラデーションに似た色を使用します。