
あまり使う機会はないかも知れませんが、たま~にあります。
今回はテキストをグラデーションにする方法について解説してきます。
効率よくコーディングしたい人はこちら
テキストのグラデーションはCSSで3行だけ
まずは左から右へグラデーションする場合です。
<p>About</p>
p {
color: red; // 非対応のブラウザの為に色を設定
background: -webkit-linear-gradient(0deg, red, white); // 背景色にグラデーションを指定
-webkit-background-clip: text; // テキストで切り抜く
-webkit-text-fill-color: transparent; // 切り抜いた部分は背景を表示
}
コード解説
それではコードの解説をします。
htmlは特に説明不要ですね。
cssですが、IEなど非対応のブラウザを無視できれば1行目無くても大丈夫です。
言葉だけでは分かりにくいと思うので、段階ごとに見てみましょう。
まずは上記CSSを1つもあててない状態がこちらです。
これはフォントの色はデフォルトの状態ですね。
それでは次にbackground: -webkit-linear-gradient(0deg, red, white);
を追加します。
これは背景色を設定した状態です。赤から白に変わっていくグラデーションですね。
最後のデモでお見せしますが、0degを180degにすると左から右へ赤から白に変わっていきます。
次は-webkit-text-fill-color: transparent;
を追加します。
これは切り抜くテキスト部分をグラデーションにした状態です。
テキストもグラデーションになりましたが、背景もまだグラデーションなので同化してますね。
そして最後にテキストを切り抜く-webkit-background-clip: text;
を追加します。
これでテキスト部分を切り抜くことが出来ました。
注意ポイント
ここでcolorを設定しないと最初のデフォルトの色になりますが、それを避けたい場合はグラデーションのメインカラーにしておくといいかと思います。
そうすればこのようになります。
デモ
それでは最後に色んなデモを見てみましょう。
See the Pen
テキストをグラデーション by junpei (@junpei-sugiyama)
on CodePen.
上下左右だけでなく、斜めにしたり、3色使ってカラフルにしたりする事も出来ます。
基本的には太字じゃないと分かりにくいですね。
また斜めの場合は1行より2行の方がハッキリしているのが分かるかと思います。
色々試してみると面白いかも知れません。
Brainランキング1位獲得 & 3日で500部突破 クチコミ約300件 今だけ!5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる!
(平均スコア)