From 684f3a1f7c141b4d1c522687062ff0e6e2e1a080 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 9 Nov 2021 23:48:02 +0900 Subject: CSS Masking のプロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/mask-mode/index.html | 119 ---------------------------------- files/ja/web/css/mask-mode/index.md | 119 ++++++++++++++++++++++++++++++++++ 2 files changed, 119 insertions(+), 119 deletions(-) delete mode 100644 files/ja/web/css/mask-mode/index.html create mode 100644 files/ja/web/css/mask-mode/index.md (limited to 'files/ja/web/css/mask-mode') diff --git a/files/ja/web/css/mask-mode/index.html b/files/ja/web/css/mask-mode/index.html deleted file mode 100644 index a4f99606b2..0000000000 --- a/files/ja/web/css/mask-mode/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: mask-mode -slug: Web/CSS/mask-mode -tags: - - CSS - - CSS Masking - - CSS Property - - Experimental - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/mask-mode ---- -
{{CSSRef}}
- -

CSS の mask-mode プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

- -
/* キーワード値 */
-mask-mode: alpha;
-mask-mode: luminance;
-mask-mode: match-source;
-
-/* 複数の値 */
-mask-mode: alpha, match-source;
-
-/* グローバル値 */
-mask-mode: inherit;
-mask-mode: initial;
-mask-mode: unset;
-
- -

構文

- -

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

- -

値

- -
-
alpha
-
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
-
luminance
-
このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
-
match-source
-
-

{{cssxref("mask-image")}} プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

- -

{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

アルファマスクモードの使用

- -

CSS

- -
#masked {
-  width: 227px;
-  height: 200px;
-  background: blue linear-gradient(red, blue);
-  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
-  mask-mode: alpha; /* ライブサンプルで変更することができます */
-}
-
- - - -

結果

- -

{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.mask-mode")}}

diff --git a/files/ja/web/css/mask-mode/index.md b/files/ja/web/css/mask-mode/index.md new file mode 100644 index 0000000000..a4f99606b2 --- /dev/null +++ b/files/ja/web/css/mask-mode/index.md @@ -0,0 +1,119 @@ +--- +title: mask-mode +slug: Web/CSS/mask-mode +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/mask-mode +--- +
{{CSSRef}}
+ +

CSS の mask-mode プロパティは、 {{cssxref("mask-image")}} で定義されたマスクを、明度とアルファマスクのどちらで扱うかを設定します。

+ +
/* キーワード値 */
+mask-mode: alpha;
+mask-mode: luminance;
+mask-mode: match-source;
+
+/* 複数の値 */
+mask-mode: alpha, match-source;
+
+/* グローバル値 */
+mask-mode: inherit;
+mask-mode: initial;
+mask-mode: unset;
+
+ +

構文

+ +

mask-mode プロパティは、以下に示す1つ又は複数のキーワード値を、カンマで区切って指定します。

+ +

値

+ +
+
alpha
+
このキーワードは、マスクレイヤーの透過性 (アルファチャンネル) の値をマスクの値として使用することを示します。
+
luminance
+
このキーワードは、マスクレイヤーの明度の値をマスクの値として使用することを示します。
+
match-source
+
+

{{cssxref("mask-image")}} プロパティが <mask-source> 型であれば、マスクレイヤー画像の明度の値がマスクの値として使用されます。

+ +

{{cssxref("<image>")}} 型であれば、マスクレイヤー画像のアルファ値がマスクの値として使用されます。

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

アルファマスクモードの使用

+ +

CSS

+ +
#masked {
+  width: 227px;
+  height: 200px;
+  background: blue linear-gradient(red, blue);
+  mask-image: url(https://mdn.mozillademos.org/files/12668/MDN.svg);
+  mask-mode: alpha; /* ライブサンプルで変更することができます */
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample("Using_alpha_mask_mode", 240, 240)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Masks", "#the-mask-mode", "mask-mode")}}{{Spec2("CSS Masks")}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.mask-mode")}}

-- cgit v1.2.3-54-g00ecf