株式会社リバース(Rivers inc.)|山口県山口市

ブログ

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

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

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

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


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

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

参考サイト

ご依頼・ご相談はこちら

お客様にヒアリングさせていただき、ご依頼内容のボリュームや必要な機能をすり合わせ、
企画・構成と共に御見積もりをスケジュールをご提案いたします。

お問い合わせ

人気の記事

スタッフ