テキストの色をグラデーションにしたいなぁ･･･
というわけで今回はテキストのカラーをグラデーションにする方法をご紹介します！
テキストの色をグラデーションにする方法
テキストの色はCSSプロパティcolor を使用しますが、colorはグラデーションを設定することができません。
ではどうするか？
ここでは下記のプロパティを使用してテキストをグラデーションにします。
・background
・background-clip
・-webkit-text-fill-color
完成したコードがこちらになります↓
See the Pen ブログ用 テキストをグラデーションにする by そす (@Sosgoyo) on CodePen.
では、次からはコードを一つずつ説明していきます！
background
グラデーションを施す前のテキストはこちらになります↓
See the Pen ブログ用 テキストをグラデーションにする by そす (@Sosgoyo) on CodePen.
ではまず、CSSプロパティbackgroundでグラデーションを設定してみましょう！
backgroundに関しては以前私のブログで紹介したので、詳しい使い方はそちらをご覧ください。
では、上記のコードにbackgroundでグラデーションを追加してみましょう。
See the Pen ブログ用 テキストをグラデーションにする仮1 by そす (@Sosgoyo) on CodePen.
backgroundなので背景がグラデーションになりましたね！
このままだと余白を含めた背景全てがグラデーションになってしまうのでdisplay:inline-block;を追加して、テキストの背景サイズを範囲にするようにします。
それがこちら↓(0.5x以下でご覧ください)
See the Pen ブログ用 テキストをグラデーションにする仮2 by そす (@Sosgoyo) on CodePen.
background-clip
background-clipは要素の背景をどこまで拡張するかを設定するCSSプロパティです。
指定できる値は、border-box、padding-box、content-boxなどがありますが、今回はtextを指定します。
background-clip: text;は、背景を前景のテキストの中に切り取って表示します。
では、コードに組み込んでみましょう↓
See the Pen ブログ用 テキストをグラデーションにする仮3 by そす (@Sosgoyo) on CodePen.
どうでしょう？背景が消えてしまいましたね。
これは背景が消えたわけではなく、テキストに沿って背景が切り取られた形になっております。
なのでテキストの裏にグラデーションがあります。
-webkit-text-fill-color
-webkit-text-fill-colorはCSSのプロパティで、テキストの文字の線の色を指定します。
ここでは、-webkit-text-fill-color: transparent;で透明色を指定します。
See the Pen ブログ用 テキストをグラデーションにする仮4 by そす (@Sosgoyo) on CodePen.
これで無事テキストをグラデーションにできましたね！
まとめ
というわけで今回は、テキストのカラーをグラデーションにする方法をご紹介しました！
それぞれの役割も覚えておくと応用効くと思いますので理解しておきましょう！！
