こんにちは、さち です。
先日、HTML の「テキスト」に「グラデーション」をかけたいことがありました。
少し複雑だったので、実装する方法を備忘録として記事に残しておきます。
実装方法
実行結果
結果
TEXT
HTML
<span>TEXT</span>
CSS
span { /* 背景にグラデーションを指定 */ background: linear-gradient(to bottom, orange 0%, limegreen 100%); /* 背景をテキストの形で切り抜く */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
「背景」にグラデーションを指定して、「テキスト」の形で切り抜くということをしています。
background-clip: text;
の効果
「背景」を「テキスト」で切り抜きます。
ただし、正式対応が2023年以降というブラウザーもあるので、ベンダープレフィックス -webkit-
がついたものも一緒に書いておいた方が安全です。
各ブラウザーの対応は下記リンク先で確認できます。
→ Background-clip: text - Can I use...
-webkit-text-fill-color: transparent;
の効果
テキストの色を「透明」にして、切り抜いた背景が見えるようになります。
color: transparent;
でもテキストの色を「透明」にできますが、background-clip: text;
に対応していないブラウザーのために、テキストの色を指定することに使ったほうが安全です。
各ブラウザーの対応は下記リンク先で確認できます。
→ CSS property: -webkit-text-fill-color - Can I use...
【余談】 画像を切り抜くことも
今回は背景を「グラデーション」にしましたが、代わりに「画像」にすることで、テキストの形で画像を切り抜くこともできます。
span { /* 背景に画像を指定 */ background: url("img/sample.jpg"); /* 背景をテキストの形で切り抜く */ -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
コメント