CSS および SVG のクリッピングおよびマスキング技術の使用方法

SVG は Web での作業に最適であり、クリッピングとマスキングを使用すると、Web グラフィックの一部を表示または非表示にする興味深い方法が可能になります。 これらの手法を使用すると、手動で変更を加えたり新しいイメージを作成したりする必要がなく、すべてコードで行われるため、デザインの柔軟性も高まります。 CSS クリッピングとマスキング技術を組み合わせて使用​​すると、Web サイトのグラフィックに多くのオプションが追加されます。

わかりやすく説明すると、マスキングとクリッピングは CSS で画像を操作できる 2 つの異なる方法です。 クリッピングから始めましょう。

クリッピングの基本

Photoshop を使用したことがある場合は、おそらくクリッピング マスクにすでに精通しているでしょう。 これも同様のアプローチです。 クリッピングでは、円や三角形などのベクトル形状を画像や要素の上に配置します。 図形の背後にある画像の部分はすべて表示されますが、図形の境界の外側はすべて非表示になります。

たとえば、三角形のクリッピング マスクが森林の画像の上にある場合、三角形の中に森林の画像が表示されます。 シェイプの境界はクリップ パスと呼ばれますが、減価償却されたclipプロパティと混同しないでください。 クリップ パスは、 clip-pathプロパティを使用して作成します。

注意: ライブサイトではこれを試さないでください

留意してください: 何も壊れないように、サイト上のコードを直接変更しないでください。 無料のローカル開発アプリ Local は、このチュートリアルに安全に従うことができるテスト環境をセットアップするのに役立ちます。

クリッピングの動作

クリップは常にベクター パスです。 理解するのが混乱するかもしれませんが、パスの外側にあるものはすべて非表示になり、パスの内側にあるものはすべて表示されます。 より深く理解し、これを自分でテストするには、CodePen のサンプルを参照してください。

この例の HTML 構造のスニペットを次に示します。

 [html]

<svg class="clip-svg">
	<defs>
		<clipPath id=&quo;ポリゴン-クリップ-三角形-正等辺" ClipPathUnits="objectBoundingBox">
			<ポリゴン ポイント="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

[/html]

これはクリッピングを行うための CSS です。

 [CSS]

.ポリゴンクリップ-三角形-等辺 {
	-webkit-clip-path: ポリゴン(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	クリップパス: ポリゴン(0% 87%、50% 0%、50% 0%、100% 87%);
	-webkit-clip-path: url("#ポリゴンクリップ-三角形-正三角形");
	クリップパス: url("#ポリゴンクリップ-三角形-正三角形");
}

[/css]

HTML 内でclipPath ID が参照されている場所と、 clip-path URL を使用してクリッピングが行われる方法を確認できます。

クリッピーツール

Clippy は、CSS クリップ パスを生成する優れたツールです。 カスタマイズ可能なスターターの形状とサイズは多岐にわたります。

マスキングの基本

マスキングは、PNG 画像、CSS グラデーション、または SVG 要素を使用して行われ、ページ上の画像の一部または別の要素を非表示にします。 ここでは SVG グラフィックスに焦点を当てますが、これは他の画像タイプやスタイルでも実行できることに注意してください。

マスク プロパティとマスク要素

視覚化を助けるためのおさらいですが、マスクされた要素は「元の」(マスクが適用される前の) 画像であることに留意することが重要です。 画像全体を表示したくない場合は、CSS maskプロパティを使用して画像の一部を非表示にします。 mask個々のプロパティのグループを表す CSS の略記です。これについては後ほど詳しく説明します。 SVG <mask>要素は、マスキング効果を追加するために SVG グラフィック内で使用されます。 この例では、マスクは円であり、グラデーションも適用されています。

SVG グラフィック上での SVG マスク要素の使用

SVG <mask>の感触を得るために、SVG グラフィックを使用してマスクします。

一見すると少し複雑かもしれませんが、すべてが連携して、基礎となる画像をマスクします。 背景として実際の画像があるのですが、SVG はどこで機能するのでしょうか? クリッピングの例とは異なり、この背景画像は技術的には SVG 要素の内部にあります。 CSS を使用してこのマスクを画像に適用します。 プロパティは SVG マスク要素から取得され、CSS でmasked-elementの ID を与えます。

これが実際に動作していることを確認するには、この Codepen サンプルをチェックしてください。 マスクされた SVG グラフィックの実際のコードは次のとおりです。

 [html]

<svg class="マスクされた要素" 幅=「300」 高さ=「300」 viewBox="0 0 300 300">
	<画像 xlink:href="画像リンク" 幅="300px" 高さ="300px" />
</svg>

[/html] 

この CSS では、マスクを見つける場所を指定しています。 #mask-this:

 [CSS]
/* マスキング用の CSS は次のとおりです */
.masked-element image {
  マスク: URL(#mask1);
}

[/css] 

円の形にグラデーションがあることに気づきましたか? グラデーションが適用され、マスクの円形が設定されています。

 [html]

<svg class="svg-mask">
 	<defs>
 		<マスク ID="mask1" MaskUnits="objectBoundingBox" MaskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2=「0」 y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx=「0.50」 cy="0.50" r=「0.50」 id=&quo;サークル&quo; fill="url(#grad)"/>
  	</マスク>
 	</defs>
</svg>

[/html]

SVG テキストのマスキング

テキスト マスキングは、テキスト ブロックを通して画像を表示するなど、非常に優れた機能を実現します。 良いニュースは、テキスト要素を SVG マスク内で使用できることです。 将来的にブラウザのサポートが増えると、これは画像とタイポグラフィを組み合わせる非常に興味深い方法になる可能性があります。

何が起こっているのかについての基本的な説明は次のとおりです。 SVG マスク内には SVG テキスト要素があります。 白の RGB 値を指定しました。これにより、マスクされたテキストの周囲に楕円形の領域が作成されます。 楕円形の領域の後ろにあるものはテキストを通して見え、切り取られたような雰囲気が得られます。

 [html]

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" 幅=「600」 高さ="400">
    <defs>
      <マスク ID="myMask">
        <rect width="100%" 高さ=「100%」 fill="#fff" />
        <テキスト x="50" y=「200」 id="myText">My Text</text>
        <テキスト x="125" y=「293」 id="mySubtext">SVG</text>
      </マスク>
    </defs>
    <ellipse class="masked" cx=「300」 cy="200" rx=「300」 ry=「150」 fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

[/html]

 [CSS]

/* テキスト要素の CSS は次のとおりです */
#myText {
フォントサイズ: 125px;
フォントスタイル: 太字;
塗りつぶし: #000;
}

/* マスキング用の CSS は次のとおりです */
.masked {
マスク: url("#myMask");
}

[/css]

完全に理解するには、コードを遊んで実験してみると役立ちます。 このコードペンで色を変更したり、テキストを変更したり、サイズを調整したりしてみてください。

Mask-Image プロパティ

画像を宣言し、 mask-image URL 値に設定できます。 前の例で示したようにmask-image PNG、SVG、または SVG mask要素への参照にすることができます。

マスキングはオブジェクトまたは要素の一部を部分的または完全に隠すために使用されるため、まず、マスクされる要素のファイルへの画像リンクが必要になります。 そのイメージは次のとおりです。 カラフルなのでマスクのどの部分が見え隠れしているのかが一目瞭然です。

 [CSS]

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="マスクされた画像">

[/css] 

ここまでは SVG コードがたくさんありましたが、この例では SVG でマスクされたラスター イメージが存在するため、少し異なります。

 [CSS]

.example-マスク {
  マスク画像: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  マスクモード: アルファ;
  webkit-mask-mode: アルファ;
  マスクリピート: リピートなし;
  webkit-mask-repeat: 繰り返しなし;
  マスクサイズ: 200px;
  webkit-mask-size: 200px;
  マスク位置: 中央;
  webkit-mask-position: 中央;
}

[/css]

mask-imageプロパティは、マスクの形状が宣言される場所です。 この場合、マスク画像は SVG グラフィックです。 URL リンクを含めることでマスクが構築されます。

こちらがCodepenです。

複数のマスク画像を結合する

マスキングをこれ以上改善することはできないと思っていたときに、複数のマスク イメージ レイヤーを設定するオプションがあります。 必要なのは、カンマで区切って 2 つの URL 値 (さらにやりたい場合はそれ以上) を追加することだけです。

上から単純なマスクを拡張するには、元のグラフィックに矢印が追加されます。 2 つのマスクを組み合わせる方法は次のとおりです。

 [CSS]

.combined-mask {
   マスク画像: url(https://linktoimage.com/arrow-01.svg)、url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg)、url(https://linktoimage.com/browser-icon-01.svg);
}

[/css] 

2 つの値を (カンマで) 追加するだけで、2 つのマスクが結合され、マスキングの可能性は無限になります。

こちらがCodepenです。

mask-imageを使用して単純なグラデーションを作成する

すべてのマスクが複雑な形状である必要はありません。 特定の画像がマスクではなく、グラデーションのような単純なマスクである場合もあります。 これを簡単に実現する方法を探している場合は、 mask-imageプロパティをオプションとして使用できます。これは実装が非常に簡単です。

この例では、 mask-imageプロパティとしてグラデーション セットに適用されるクラスがありました。 この単純な宣言により、画像上にグラデーション マスクを簡単に作成できました。

 [CSS]

マスク画像: 線形グラデーション(黒、白、透明);
-webkit-mask-image: 線形グラデーション(黒、白、透明);

[/css] 

コードペンでこれを参照してください。

Mask-Repeat プロパティ

マスクを 1 つ作成したら、さらに簡単にマスクを作成できます。 これは、カスタム パターンを作成したい場合に非常に便利です。 Mask-repeat プロパティを使用すると、マスクを繰り返すことができます。 これまでにタイル状の背景を作成したことがある場合、これはそれに似ています。

完璧なパターンを作成するために宣言する必要があるサイズやマスクリピートのタイプなど、留意すべき重要な点がいくつかあります。

mask-size 、特にここでピクセル値を設定すると非常に簡単に視覚化できます。

 [CSS]

マスクサイズ: 200px;
webkit-mask-size: 200px;

[/css] 

パターンに別の効果を探している場合は、さらにいくつかのマスク繰り返しオプションがあります。

• repeat-x x 座標に沿って繰り返します。
• Repeat-y y 座標に沿って下方向に繰り返します。
• space利用可能な領域に繰り返し広がります。
• round利用可能な領域全体で何度も繰り返されます (必要に応じて、スケーリングはスペースを埋めるのに役立ちます)

ブラウザのサポート

グラフィックスを扱うこの新しい方法に取り組む前に、ブラウザーのサポートがクリッピングやマスキングと一致していないことに注意することが重要です。 クリッピングはマスキングよりもサポートされていますが、Internet Explorer はクリッピングを完全にはサポートしていません。

現在のブラウザーによる CSS マスクのサポートもかなり制限されているため、いくつかの装飾要素の拡張として使用することをお勧めします。 そうすれば、ユーザーのブラウザーでサポートされていない場合でも、コンテンツの視聴エクスペリエンスに影響を与えることはありません。

マスクとクリッピングがサポートされているかどうかをテストして確認するには、JSFiddle または Codepen を作成し、別のブラウザーで試してみることをお勧めします。 ブラウザのサポートは近年増加しており、最終的には完全にサポートされるようになるでしょう。

制限に落ち込まないでください。常に先手を打つのは良いことです。サポートがより主流になれば、グラフィックスに革命を起こす方法が正確にわかります。 疑問がある場合は、信頼できる「Can I Use」を必ず参照してください。

これらの例を試してみると、マスキングとクリッピングの入門としては十分でしょう。 現時点ではブラウザのサポートは限られていますが、将来的にはこれが主流になる可能性があります。

これらのテクニックを使って興味深いビジュアルを作成する方法を考えるのはいつも楽しいです。 Web グラフィックスの将来では、画像エディターへの依存度が低くなり、ブラウザーで直接画像を作成および変更するより効果的な方法が可能になるでしょう。

サイトに費やしたすべての努力を真に輝かせたい場合は、WP Engine を備えた可能な限り最高の WordPress ホスティングを選択していることを確認してください。