インソースマーケティングデザイン
2022.01.07 コーディング
【コーディング】CSSマスクをやってみた！
CSSマスクを使用する機会があまりなかった為、以下サイトを参考にコーディングしてみました。
■参考サイト
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ
オブジェクトマスク
テキストマスク
まとめ
実際にコーディングをしてみて、円や角丸はこれまで通りborder-radiusで指定したほうが扱いやすそうでした。
画像マスクやhoverでのマスクの使用はデザインの領域が広がりそうなので、今後はどんどん使っていきたいです。
また、今回はコーディングしていませんが、CanvasやGifを利用したマスクもメインビジュアルの動きに使えそうなので機会があればチャレンジしてみたいと思います。
