マスクの使い方 (clipPath / mask)

参考:

画像の合成 | defghi1977

クリッピングとマスクの使い方 キラキラのパスの打ち方 | レアカードの Web デザイン日記

svg を使って、html 要素を mask / clip する – Qiita

クリッピングとマスキング | MDN

CSS マスク | MDN

クリッピング, マスキング, 組成法 | SVG 1.1 第2版 (triple-underscore.github.io)

Masking vs. Clipping: When to Use Each | CSS-Tricks

A Comprehensive Guide to Clipping and Masking in SVG | Envato Tuts+

How to use CSS and SVG clipping and masking techniques | Flywheel

CSS & SVG Masks (Test cases) | Vincent De Oliveira

CSS Masking | HTML5 Rocks

ドキュメント

参考:

クリッピング, マスキング, 組成法 | SVG 1.1 第2版 (triple-underscore.github.io)

Clipping, Masking and Compositing | SVG 1.1 Second Edition (w3.org)

CSS Masking Module Level 1 | W3C

Can I use

参考:

CSS Masks – Can I use… Support tables

clipPath

参考:

SVG を使ったクリッピングマスク | Designmemo デザインメモ

クリッピングマスクにチャレンジ!静止画像も動画も、SVG で切り抜こう! | Web クリエイターボックス

Cutting out the inner part of an element using clip-path | CSS-Tricks

Clipping in CSS and SVG | Sara Soueidan

clip-path | Codrops CSS Reference

Reverse clip path with blend modes | CodePen

mask

mask-type に応じて画像をマスクする。

  • luminance:相対輝度によって画像を透過させて表示する。黒 → 0%、白 → 100%。(デフォルト)
  • alpha:アルファ値によって画像を透過させて表示する。

参考:

mask マスキング | プログラミング入門レシピ

マスク要素 (コンテナ要素) | 集の一期一会

<mask> | MDN

mask | CSS Masking Module Level 1

invert SVG clip (show only outside path) – Stack Overflow

mask-type

mask 要素の透過タイプを指定する。

  • luminance:相対輝度によってマスクの透過度が決まる。黒 → 0%、白 → 100%。(デフォルト)
  • alpha:アルファ値によって透過度が決まる。

参考:

mask-type | Codrops CSS Reference

mask-type | MDN

Relative luminance – Wikipedia

mask-image

.scope {
  mask-image: url(mask.svg#area);
}

参考:

mask-image | CSSリファレンス

mask-size | CSSリファレンス

mask-image を使って文字や背景にテクスチャを適用してみよう | HTML CSS javascript のまとめ

svg ファイルの画像でマスクをかける | teratail

mask-image | MDN

mask-image | Codrops CSS Reference

Masking in the Browser with CSS and SVG | SitePoint

Masking Images in CSS Using the mask-image Property | Alligator.io

mask-mode

mask-type と同じ意味の同じ値を取る。SVG においては mask-type が優先される。

参考:

mask-mode | Codrops CSS Reference

サンプル

参考:

CSS and SVG Masks | CodePen

Content placeholder SVG clip-path | CodePen

Horizon.io Demo | CodePen

ツール

参考:

Clippy – CSS clip-path maker

Clip Path Generator | CSS Plant

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です