system
I.M

2022.1.7HTML/CSS 

Webクリエイター

I.M

2021年8月1日「マリンロード」は「インソースマーケティングデザイン」へ社名を変更いたしました

【コーディング】CSSマスクをやってみた！

CSSマスクを使用する機会があまりなかった為、以下サイトを参考にコーディングしてみました。

■参考サイト
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ

オブジェクトマスク


テキストマスク


まとめ

実際にコーディングをしてみて、円や角丸はこれまで通りborder-radiusで指定したほうが扱いやすそうでした。
画像マスクやhoverでのマスクの使用はデザインの領域が広がりそうなので、今後はどんどん使っていきたいです。
また、今回はコーディングしていませんが、CanvasやGifを利用したマスクもメインビジュアルの動きに使えそうなので機会があればチャレンジしてみたいと思います。

WEBサイト診断 現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら

スタッフおすすめの記事

ページTOPへ