インソース
2022.01.07 コーディング
【コーディング】CSSマスクをやってみた！
CSSマスクを使用する機会があまりなかった為、以下サイトを参考にコーディングしてみました。
■参考サイト
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ
オブジェクトマスク
テキストマスク
まとめ
実際にコーディングをしてみて、円や角丸はこれまで通りborder-radiusで指定したほうが扱いやすそうでした。
画像マスクやhoverでのマスクの使用はデザインの領域が広がりそうなので、今後はどんどん使っていきたいです。
また、今回はコーディングしていませんが、CanvasやGifを利用したマスクもメインビジュアルの動きに使えそうなので機会があればチャレンジしてみたいと思います。
インソースが書いた他の記事
見積もり・ご依頼など、
お気軽にご相談ください
フリーダイアル
0120-800-255
受付時間 8:30〜17:30（土・日・祝・年末年始を除く）
