WordPress記事

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

2023/12/31

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でくり抜く

今回使うプロパティー(属性)は、background-clip: textです。 

ちなみにpropertyの語源は、pro(前へ 引用例 prologue(序章))とラテン語の(propria …「固有の、特有の」)が合わさってできたものだということです。 

参照: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.

-WordPress記事