Blogブログ

2018/10/10 WEB

クリッピングマスクみたいに画像を文字で切り抜くCSS

イメージ

iPhone Xsのページのフォントが素敵だったので真似してみました。
テクスチャ画像をクリッピングマスクみたいに文字で切り抜くイメージです。

See the Pen クリッピングマスクみたいに画像を文字で切り抜くCSS by hukahuka (@ancupdy4ijirzud) on CodePen.


※ダミー画像のテクスチャがランダムで出ます。

アクセント的に使えそうでいいですね。
フォントが大きいと画像の雰囲気出ていい感じ!
background-clipというプロパティは使ったことがないのですが、最新のブラウザだと動作も安定しているみたいなので機会があったら使ってみたいですね〜
(追記:IEではbackground-clip: text;が反映されないので個別指定が必要!)

参考サイト