CSSだけでテキストにグラデーションを作ってみましょう。
CONTENTS
サンプル
サンプルを見てみましょう。
See the Pen
テキストデザイン by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.
ブルーからピンクになっているのが分かると思います。
HTML
HTMLはこんな感じです。
<body> <h1>イロイロデザインラボ</h1> </body>
要素に直接グラデーションをかけると使いにくいので、実際にはclassを指定したほうが良いです。
CSS
CSSはSCSSを使っています。
h1 { padding: 2rem; text-align: center; font-size: 2rem; font-weight: bold; display: inline-block; background: linear-gradient(90deg, #56c6f2 0%, #ff7c9c 100%); color: transparent; -webkit-background-clip: text; }
display: inline-block;
グラデーションの考え方として、テキストを囲んでいる要素の背景をグラデーションにしたものをマスクするので、<p>や<div>などブロックレベルの要素に直接グラデーションをかけてしまうとテキストの長さと要素の長さに差が出たときに、うまくグラデーションをかけられません。
そのため、テキストを囲っている要素にはdisplay:inline-block;
やdisplay:inline;
を指定するか、<span>などインライン要素を使いましょう。
今回は<h1>のブロックレベル要素を使っているので、CSSでdisplay:inline-block;
を指定しています。
background: linear-gradient;
テキストに適用するグラデーションを指定します。
-webkit-background-clip: text;
テキストを囲っている要素をテキストの形にクリップします。Photoshopのクリッピングマスクみたいな感じですね。
color: transparent;
テキストの色を透明にしています。テキストを透明にしないと背景にかけたグラデーションが透けて見えないので、忘れないようにしましょう。