ブラウザでCSSとSVGをマスキングします

マスキングは、残りを隠しながら画面上に要素または画像の選択した部分を表示できる手法です。 Web開発者は、マスクプロパティとSVGマスク要素を介してブラウザでこの手法を使用できます。これらの機能により、画像編集ソフトウェアを使用せずに、ブラウザ内の画像やその他の要素にマスキング効果を表示できます。 この記事では、CSSとSVGマスキング機能を実行していることを示し、現在のブラウザのサポートの問題に関する情報を必ず含めるようにします。

執筆時点では、ほとんどのコードサンプルはWebKitブラウザーでのみ機能しますが、SVGベースのマスクはより広いブラウザのサポートを楽しんでいるようです。したがって、例を試してみたい場合は、ChromeのようなWebKitブラウザを使用することをお勧めします。

キーテイクアウト

CSSおよびSVGでのマスキングにより、CSS「Mask」プロパティまたはSVG `

`要素のいずれかを使用して、要素の選択的な可視性が可能になります。

CSSマスキングは画像、勾配、またはSVG参照を利用できますが、SVGマスキングはベクターグラフィックスでよりコントロールを提供し、色とグラデーションマスクをサポートします。

ブラウザのサポートはさまざまです。CSSマスクは主にWebKitブラウザーでサポートされていますが、SVGマスクはFirefoxやInternet Explorerなどの最新のブラウザ全体でより広い互換性を持っています。 「マスクイメージ」、「マスクモード」、「マスクリピート」、「マスクポジション」、「マスクサイズ」などのマスクプロパティは、個別に設定するか、「マスク」プロパティに組み合わせることができます。便利なため。
• アニメーションやテキストをマスクとして使用するなどの高度なマスキング効果を、CSSとSVGの両方で実現でき、Webデザインの柔軟性と創造性を高めます。 Web上でのマスキング
• クリッピングまたはマスキングを使用して、ウェブ上のマスキング効果を達成できます。
• クリッピングには、画像や要素の上に、円やポリゴンなどの閉じたベクトル形状を敷設することが含まれます。形状の背後にある画像の部分の部分は表示されますが、形状の境界の外側の部分は隠されます。シェイプの境界はクリップパスと呼ばれ、クリップパスプロパティを使用して作成します。
マスキングは、PNG画像、CSSグラデーション、またはSVG要素を使用して行われ、ページ上の画像または他の要素の一部を非表示にします。 CSS Maskプロパティを使用してこれを達成できます この記事では、CSS MaskプロパティとSVG 要素でのマスキングにのみ焦点を当てます。
CSSマスクプロパティ
マスクは、個々のプロパティ全体のCSS速記のプロパティです。 それらのいくつかをより詳細に詳しく見てみましょう。

マスクイメージプロパティ

マスクイメージプロパティを使用して、要素のマスクレイヤー画像を設定できます。

値なしは、まったく値を設定することと同じではありません。それどころか、それはまだ透明な黒の画像層としてカウントされます。

Mask-ImageをURL値に設定できます。これは、PNG画像ファイルへのパス、SVGファイル、またはSVG 要素への参照です。コンマで区切られた対応する数のURL値を追加することにより、複数のマスク画像レイヤーを設定できます。

ここにいくつかの例があります：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

これは、

mask1：のIDでsvg 要素を参照する方法です。

.masked-element {
  mask-image: url(#mask1);
}

グラデーション画像は、マスクイメージプロパティにも適した値です。

マスクモードプロパティ

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

マスクモードを使用すると、マスクレイヤーイメージをアルファマスクまたは輝度マスクのいずれかに設定できます。

アルファマスクは、アルファチャネルを備えた画像です。さらに詳しくは、Alphaチャネルは、各ピクセルのデータに含まれる透明性情報です。 Alphaに設定されたMask-Modeプロパティを使用したマスキング操作は、画像のAlpha値をマスク値として使用します。

アルファチャネルの便利な例は、黒くて透明な領域を持つPNG画像です。マスクされた要素は、1つのアルファ値を持つマスク画像の黒い部分を通して表示されます。アルファ値がゼロの透明部分の下の他のすべては隠されます。

このPNG画像をアルファマスクとして使用します：

そして、以下のJPG画像でマスキング操作を実行します：

これが魔法が起こる場所です：

そして、これがブラウザの結果の様子です：

.masked-element {
  mask-image: url(alpha-mask.png);
  mask-mode: alpha;
}

輝度マスクは、画像の輝度値をマスク値として使用します。上記のようなPNG画像 - しかし、白い画像は、輝度マスクの良い例です：

マスクの白いピクセルで覆われているマスクをマスクする要素の領域が透けて表示されます。マスクの透明なピクセルで覆われたマスクされた要素の部分は隠されます。 マスクモードプロパティを輝度に設定し、上記の画像をマスクとして使用すると、以前と同じ結果が表示されます。

ここにコードがあります：

マスク繰り返しのプロパティ

マスクリピートは、バックグラウンドリピートのプロパティによく似ています。サイズと位置を設定した後、マスクレイヤー画像のタイルを制御します。

可能な値は次のとおりです

• 繰り返し：マスク層の画像は、利用可能なスペース全体で繰り返されません。
• Repeat-X：マスクレイヤー画像がX座標に沿って繰り返されます。
繰り返しY：マスクレイヤー画像がY座標を繰り返します。
スペース：マスクレイヤーの画像が繰り返され、利用可能な領域全体で間隔が広がっています。
ラウンド：マスク層の画像は、利用可能な領域全体で繰り返されます。整数が利用可能なスペースに収まらない場合、画像は拡大されるまで拡大されます。
• たとえば、
これは私がマスクとして使用することを意図している画像です：

下のコードスニペットは、マスクリピートプロパティをスペースの値に設定します。 次のマスキング効果をもたらします：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

マスクポジションプロパティ

マスクポジションプロパティを使用してマスクレイヤー画像を配置できます。このプロパティを、より馴染みのあるCSSバックグラウンドイメージプロパティに使用するのと同じ値に設定できます。その初期値は中心です。 たとえば、

ビューポートの左上隅にマスク画像レイヤーを配置する場合は、マスクポジションプロパティを

0 0

：

の値に設定します。

これは、上記のコードがブラウザでどのように見えるかです：

上記のマスクポジションプロパティの値を

.masked-element {
  mask-image: url(#mask1);
}

100％100％

に変更すると、ビューポートの右下にマスクレイヤー画像が表示されます。

マスクサイズのプロパティ

マスクサイズのプロパティを使用してマスクレイヤー画像のサイズをすばやく設定できます。これは、より馴染みのあるCSSバックグラウンドサイズのプロパティと同じ値を受け入れます。 たとえば、マスクサイズを50％に設定すると、マスクレイヤー画像が全幅の50％に表示されます。

封じ込めるマスクサイズの設定は、マスクレイヤーイメージを最大サイズにスケーリングし、その幅と高さの両方がマスクの位置決め領域内に収まるようにします。

これらのデモが以下のCodepenでアクション中のライブを見ることができます：

codepenのSitePoint（@sitepoint）によるペンCSSマスクの例を参照してください。

マスク層の合成

上記で説明したように、マスクイメージプロパティの各値をコンマで分離することにより、同じ要素に複数のマスク層を使用できます。レイヤーは他のレイヤーの上に積み重ねられ、最後のレイヤーが画面に最初に表示されます。

たとえば

：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

上のスニペットでは、

mask2.pngがmask1.pngの上に層状になっています。

マスクコンポジットプロパティでは、次のキーワードの値に応じて、さまざまなマスクレイヤーを組み合わせることができます。

add：

mask2.png

は、
• mask1.pngの上に塗装されています 減算：mask2.png
の一部を表示します。ブラウザは標準のキーワードをまだサポートしていないため、少なくとも当面は、対応するコンポジットオペレーターキーワードソースを使用する必要があります。
• Intersect：mask2.pngの一部を表示しますmask1.png。ただし、CSSマスクをサポートする唯一の種類のブラウザであるWebKitブラウザは、非標準のコンポジットソースインキーワードが使用されている場合でも、画面に何も表示されないようです。
除外：
• mask1.pngおよびmask2.pngの一部を表示します。これは重複しません。繰り返しますが、標準のキーワードにはまだサポートがないため、CompositingオペレーターXORを使用する方がはるかに良いです。
• 以下のCodepenデモでライブデモをチェックできます： CodepenでSitePoint（@SitePoint）によるペンCSSマスクの合成を参照してください。
マスクの速記のプロパティ

マスクを使用して、CSSマスキング操作を1回で1回でマスキング操作を制御するすべてのプロパティを設定できます。

これが全マスクの速記です：

マスクオリジンとマスククリップは、より馴染みのあるバックグラウンドオリジンとバックグラウンドクリップのプロパティのように機能します。

マスクの速記のプロパティを並べ替えることはできますが、「/」シンボルで区切られたマスクポジションプロパティの後にマスクサイズのプロパティを設定する必要があります。また、マスクポジションを設定せずにマスクサイズを設定すると、無効な宣言が発生します。

最後に、マスクプロパティで指定できない値は最初のデフォルト値に戻されるため、個々のプロパティをリセットする必要がある場合にマスクを使用すると本当に便利です。

svgマスク要素

スケーラブルなベクトルグラフィックス、または略してSVGは、グラフィックをマークアップするためのXMLベースの言語です。

SVGでできるもう1つのクールなことは、テキストを使用してページ上の他の要素をマスキングすることです。

これらの可能性のそれぞれを詳しく見てみましょう。

.masked-element {
  mask-image: url(#mask1);
}

HTML要素でSVG 要素を使用して

を使用します

執筆時点で、インラインSVGグラフィック内の要素を使用してHTML要素をマスクしてFirefoxブラウザーでのみ動作します。例を次に示します：

次のCSSを使用して

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

上記のコードには、

mask1のIDを含む要素を含めました。マスクの内部には、段階のIDと勾配を塗りつぶしの色として使用する円形の白黒勾配を配置しました。 最後に、CSS MaskプロパティでSVG 要素のID値を参照しました。 これにより、ページ上の画像にマスキング効果が適用されます。

ページの背景とマスクされた画像に他のいくつかのスタイル宣言を追加するだけで、以下のようなかなり劇的な効果を実現できます。

勾配の白い色合いで満たされた円マスクの部分が、マスクされた画像がどのように表示されるかに注意してください。逆に、勾配の黒い色合いで満たされた部分は、マスクされた画像を隠します。

これがcodepenでこれのライブデモです（覚えておいてください、それはFirefoxでのみ動作します！）

。

CodepenのSitePoint（@SitePoint）によるインラインSVGマスク要素を備えたペンマスキングを参照してください。

SVGグラフィックでSVG 要素を使用してを使用しています

前の例から同じSVG 要素を使用できますが、今回はHTML要素ではなくSVGグラフィックをマスクします。利点は、WebKitブラウザーや最新のIEなど、ブラウザのサポートがはるかに優れていることです。

下のスニペットでは、SVG要素内にマスクしたい画像を配置し、CSSマスクプロパティを適用します。 CSS Maskプロパティは、前の例のように、

mask1

のIDを持つsvg 要素を参照しています。マスクされたSVGグラフィックのコードは次のとおりです

そして、これはCSSでのマスキング操作の世話をするスニペットです：

結果は前の例に非常に似ていますが、今回のみ、すべての主要なブラウザで表示できます。 Codepenデモをご覧ください：

.masked-element {
  mask-image: url(#mask1);
}

codepenのSitePoint（@SitePoint）によるSVG要素のペンSVGマスクを参照してください。 SVGテキストでのマスキング

SVGマスク内のテキスト要素を使用してマスキング操作を実行できます：

.masked-element {
  mask-image: linear-gradient(black 0%, transparent 100%);
}

上記のスニペットは、SVGマスク内に黒いSVGテキスト要素を追加し、CSSマスクプロパティを使用してライトブルーSVG楕円形に適用します。 楕円形の後ろにあるもの（この場合、ボディの背景画像）がテキストを通して表示されます。結果は次のようになります：

完全なコードはcodepen：

で利用できます codepenのSitePoint（@SitePoint）によるペンSVGテキストマスクを参照してください。

マスクのアニメ

CSSトランジションとキーフレームアニメーションを使用して、マスクポジションとマスクサイズをアニメーション化できます。 以下は、星型のPNGマスク画像の基本的なキーフレームアニメーションの例です。

ここに関連するコードスニペットがあります：

マスクされた要素はhtml タグ：

です

マスキング操作では、Shorthand Maskプロパティを使用しています

要素のAnimateクラスは、CSS変換とアニメーションを使用して星型の画像に動きを追加します：

/* masking with two comma-separated values */
.masked-element {
  mask-image: url(mask.png), none;
}


/* using external svg graphic as mask */
.masked-element {
  mask-image: url(mask.svg);
}

ChromeのようなWebKitブラウザを起動し、Codepenで次のライブデモをチェックしてください：

.masked-element {
  mask-image: url(#mask1);
}

CodepenでMaria Antonietta Perna（@antonietta）によるCSSマスクでアニメーション化されているペンを参照してください。

タグにマスキング効果を追加してから、CSSでアニメーション化できます。 ここにクイックCodepenデモがあります：アニメーションはブラウザで表示されますが、マスキングはFirefoxでのみレンダリングされます：

CodepenのSitePoint（@SitePoint）によってHTML要素のペンアニメーションSVGマスクを参照してください。

良いニュースは、インラインSVGグラフィックにSVGマスクを適用すると、ブラウザがすぐにスカイロケットをサポートすることです。 SVGのみを使用して同じアニメーションデモをチェックしてください：

CodepenのSitePoint（@SitePoint）によってSVG要素でSVGマスクをアニメーション化するペンを参照してください。

マスクプロパティのブラウザのサポート

この記事全体でブラウザのサポートの問題に触れました。執筆時点での状況の単純な内訳は、次のようになります：

CSS Maskプロパティを使用して、HTML要素のPNGまたは外部SVG画像マスクWebKit-ベンダープレフィックスのみでWebKitブラウザで動作します。 HTML要素のインラインSVGマスク要素は、Firefoxでのみサポートされています。 SVG要素のインラインSVGマスク要素は、WebKitブラウザーとFirefoxおよび最新のインターネットエクスプローラーでサポートされています。

Yokselのこの素晴らしいCodepenデモは、ブラウザのサポートに関する限り、最新技術の視覚的なイラストを提供します。

Alan GreenblattはGitHubリポジトリを利用可能にし、CSSグラフィック関連プロパティがどのブラウザによってサポートされているかについて詳しく説明します。

ブラウザのサポート互換性テーブルでは、Webサイトを使用することができます。

CSSマスクの現在のブラウザサポートはあまり良くありませんが、この機能をいくつかの装飾要素の拡張として使用すると、サポートしていないブラウザのユーザーは見逃していることにさえ気付きません。

リソース

CSSマスキングモジュールレベル1 - W3Cエディターのドラフト

CSS-tricks

のCSSのクリッピングとマスキング

マスクイメージを使用したマスキングに関するCODROPS CSSリファレンス
• MDN
on
• svg Jakob Jenkov
による
• SVGマスク Dirk SchulzeによるCSSマスキング
• 共有したいWebへのクールなマスキング効果を知っていますか？コメントボックスを押して、私に知らせてください。
CSSおよびSVGマスキングに関するよくある質問（FAQ）
CSSとSVGのマスキングの違いは何ですか？
• CSSとSVGマスキングは両方とも、要素の部分を非表示または明らかにすることができます。ただし、アプローチと能力が異なります。 CSSマスキングは、マスク画像のアルファチャネルが要素の可視性を決定するマスク層として画像を使用します。一方、SVGマスキングは、ベクトルグラフィックをマスクレイヤーとして使用します。これにより、マスクの形状とサイズをより柔軟に制御できます。 SVGマスキングは、CSSマスキングでは不可能な色と勾配マスクもサポートします。 Web要素にユニークな視覚効果を追加します。 SVGを使用して勾配マスクを作成するには、マスク要素内の線形勾配または放射状勾配要素を定義する必要があります。勾配要素には、勾配に沿って異なるポイントで色と不透明度を定義する少なくとも2つのストップ要素が必要です。 SVGマスキングを一緒にマスキングして、複雑なマスキング効果を作成します。 CSSマスクを要素に適用してから、同じ要素にSVGマスクを適用できます。要素の最終的な可視性は、2つのマスクの組み合わせによって決定されます。

CSSマスクがインターネットエクスプローラーで機能しないのはなぜですか？ Internet Explorerをサポートする必要がある場合は、代わりにSVGマスキングを使用する必要があります。 SVGマスキングは、インターネットエクスプローラーを含むすべての主要なブラウザでサポートされています。 CSSマスキングの場合、CSSアニメーションまたはトランジションを使用してマスクイメージプロパティをアニメーション化できます。 SVGマスキングの場合、SVGアニメーションを使用してマスク要素をアニメーション化できます。

テキストをCSSまたはSVGを使用したマスクとして使用できますか？

はい、CSSとSVGの両方のマスクとしてテキストを使用できます。 CSSマスキングの場合、テキスト画像をマスク画像として使用できます。 SVGマスキングの場合、テキスト要素をマスク要素として使用できます。

CSSまたはSVGを使用した円形マスクを作成して、CSSを使用して円形マスクを作成するにはどうすればよいですか。マスク画像としての放射状勾配関数。 SVGを備えた円形マスクを作成するには、マスク要素として円エレメントを使用できます。

複数の形状の複雑なマスクを作成して、複数の形状の複雑なマスクを作成するにはどうすればよいですか、SVGマスキングを使用できます。 SVGマスキングにより、マスク要素として複数の形状要素（rect、円、ポリゴンなど）を使用できます。これらの形状を個別に配置してサイズして、複雑なマスクを作成できます。

CSSまたはSVGを使用したマスクとしてビデオを使用できますか？マスクイメージプロパティをビデオURLに設定することにより、ビデオをマスク画像として使用できます。 svgマスキングはビデオマスクをサポートしません。

CSSマスキングの場合、CSSまたはSVGを使用したマスクの不透明度を調整するにはどうすればよいですか。マスクの不透明度は、のアルファチャネルによって決定されます。マスク画像。マスク画像を編集して、不透明度を調整できます。 SVGのマスキングの場合、マスクの不透明度は、マスク要素の充填障害およびストローク容量特性によって決定されます。これらのプロパティを変更することにより、不透明度を調整できます

以上がブラウザでCSSとSVGをマスキングしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。