HTML・CSS web学習

htmlとcssだけで文字にグラデーションする方法

2021/02/23

1 Illustratorを使わないでも、文字装飾に役立つ 

文字装飾って簡単なようで、結構大変ですよね。ぼかしたり、カーニング(文字の間隔を調整したり)、グラデーションしたり、袋文字にしたり・・・

文字をグラデーションしたい場合は、Illustrator appearance機能を使ってバナーのようにしないと一般的にはできないですよね!?

でも良い方法が見つかりました。htmlとcssだけで出来てしまいます。

2 手順

(1)文字のある<h2>タグなどのブロック要素のbackgroundをグラデーションする

background: -webkit-linear-gradient(30deg,#065ef6,#bc65dc,#eb5234);

 

(2)テキストの文字の色を透明(transparent)にする

このプロパティが設定されていない場合、colorプロパティの値が使用されます。

 

(3)background-clipプロパティー(-webkit-background-clip: text;)で、要素の背景をtextでくり抜く

参照:MDNのbackground-clip - CSS: カスケーディングスタイルシート (https://developer.mozilla.org/ja/docs/Web/CSS/background-clip)

 

3 まとめ

うまくいきましたでしょうか?!便利な機能、是非、使ってみてください。

自分も使っていきます。

4 実際のコード(code pen)

See the Pen
文字をグラデーションする方法
by 佐久間 俊雄  (@zojydusc)
on CodePen.

-HTML・CSS, web学習