こんにちは。01waveトミーです。

IllustratorやPhotoshopで「クリッピングマスク機能」という画像を文字の形に切り抜く機能があります。

↓クリッピングマスク後↓

 

CSSでも同様のことができないかな〜と思って調べてみると、、、

美しい星空

できました!!!!!

See the Pen
yLBppdJ
by Miyuki Tominaga (@miyuki-tominaga)
on CodePen.

下記のコードの効果により実現できました!

-webkit-background-clip: text;

「background-clip」は、背景の適用範囲を指定する際に使用するプロパティです。
今回はその適用範囲を「text」にしたので、「テキスト部分にのみ背景をつけますよ」ということになります。

しかし、このコードを書くだけでは実装できません!

文字自体に色がついているので、文字の色を透明にする必要があります。
そのため、文字色を透明にする下記CSSも一緒に記述しましょう。

color: transparent;

 

気になる方は是非チャレンジしてみてください!
詳細につきましては、CodePenにコードを記述しているので、ご参考になれば幸いです。

See the Pen
yLBppdJ
by Miyuki Tominaga (@miyuki-tominaga)
on CodePen.

この記事が気に入ったら
いいね ! しよう

Twitter で