【初心者向け】CSS「mask-composite」でできることとは？ 画像やベジェ曲線を使った実践的な例を紹介
mask-compositeを使用すると、従来のマスク機能では実現できなかった複雑な形状や効果を作成することができます。
mask-compositeには、以下の4つの値があります。
- exclude: 上位のマスクレイヤーで覆われた部分を、下位のマスクレイヤーから除外します。
- intersect: 各マスクレイヤーの重なり合う部分のみを表示します。
- subtract: 上位のマスクレイヤーを、下位のマスクレイヤーから引き算します。
- add: すべてのマスクレイヤーを単純に重ね合わせます。
以下に、mask-compositeの例を示します。
例1：2つの円を重ね合わせる
.element {
width: 100px;
height: 100px;
background-color: #f00; /* 赤色 */
mask-image: url(circle1.png), url(circle2.png);
mask-composite: add;
}
この例では、circle1.pngとcircle2.pngという2つの円形のマスク画像を重ね合わせます。結果は、2つの円が重なり合う部分が表示されます。
例2：マスクを使って星形を作成する
.element {
width: 100px;
height: 100px;
background-color: #00f; /* 青色 */
mask-image: url(star.png);
mask-composite: intersect;
}
この例では、star.pngという星形のマスク画像を使用して、要素の形状を星形にします。
mask-compositeは、さまざまなマスクレイヤーを組み合わせることで、複雑な形状や効果を作成することができます。詳細については、以下のリソースを参照してください。
- mask-compositeは、SVGにも使用できます。
- mask-compositeは、比較的新しいプロパティであるため、すべてのブラウザでサポートされているわけではありません。互換性を確保するには、ベンダープレフィックス（-webkit-, -moz-, など）を使用する必要があります。
例1：影付きテキスト
この例では、mask-compositeを使用して、テキストに影を付けます。
<!DOCTYPE html>
<html>
<head>
<style>
.text {
font-size: 30px;
color: #fff;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
mask-image: url(shadow.png);
mask-composite: add;
}
</style>
</head>
<body>
<p class="text">影付きテキスト</p>
</body>
</html>
このコードでは、shadow.pngという影の画像を使用して、テキストに影を付けています。
例2：二重露光
この例では、mask-compositeを使用して、2つの画像を二重露光します。
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 200px;
height: 200px;
mask-image: url(image1.jpg), url(image2.jpg);
mask-composite: add;
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
このコードでは、image1.jpgとimage2.jpgという2つの画像を重ね合わせて、二重露光効果を作成しています。
この例では、mask-compositeとSVGを使用して、ベジェ曲線でマスクされた要素を作成します。
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 200px;
height: 200px;
background-color: #f00;
mask: url(#mask);
}
svg {
width: 200px;
height: 200px;
}
#mask {
mask-mode: alpha;
}
path {
fill: white;
d: M 0 0 L 200 0 L 200 200 L 0 200 Z;
}
</style>
</head>
<body>
<div class="element">
<svg>
<defs>
<mask id="mask">
<path />
</mask>
</defs>
</svg>
</div>
</body>
</html>
このコードでは、SVGを使用してベジェ曲線を定義し、その曲線をマスクとして使用して要素の一部のみを表示しています。
これらの例は、mask-compositeを使用して作成できる効果のほんの一例です。創造性を発揮して、独自のマスクを作成してみてください。
- mask-compositeは、SVGにも使用できます。
- mask-compositeは、比較的新しいプロパティであるため、すべてのブラウザでサポートされているわけではありません。互換性を確保するには、ベンダープレフィックス（-webkit-, -moz-, など）を使用する必要があります。
- 上記の例はあくまでも一例であり、mask-compositeを使用して作成できる効果は無限にあります。
mask-compositeの代替方法として、以下の方法が考えられます。
複数のマスクレイヤーを重ねる
mask-compositeを使用せずに、複数のマスクレイヤーを重ねることで、同様の効果を実現することができます。この方法は、比較的単純で、すべてのブラウザでサポートされています。
.element {
width: 100px;
height: 100px;
background-color: #f00;
mask-image: url(mask1.png), url(mask2.png);
}
この例では、mask1.pngとmask2.pngという2つのマスク画像を重ね合わせています。結果は、2つのマスクが重なり合う部分が表示されます。
SVGマスクを使用する
SVGマスクを使用すると、mask-compositeよりも柔軟性とパフォーマンスの高いマスクを作成することができます。
<!DOCTYPE html>
<html>
<head>
<style>
.element {
width: 200px;
height: 200px;
background-color: #f00;
mask: url(#mask);
}
svg {
width: 200px;
height: 200px;
}
#mask {
mask-mode: alpha;
}
path {
fill: white;
d: M 0 0 L 200 0 L 200 200 L 0 200 Z;
}
</style>
</head>
<body>
<div class="element">
<svg>
<defs>
<mask id="mask">
<path />
</mask>
</defs>
</svg>
</div>
</body>
</html>
キャンバスAPIを使用する
キャンバスAPIを使用すると、非常に複雑なマスクを作成することができます。ただし、この方法は難易度が高く、パフォーマンスも低下する可能性があります。
どの代替方法を選択するかは、要件によって異なります。
- パフォーマンスが最も重要である場合は、キャンバスAPIを使用する方法を検討する必要があります。
- より複雑なマスクを作成する場合は、SVGマスクを使用する方法がおすすめです。
- シンプルなマスクを作成する場合は、複数のマスクレイヤーを重ねる方法がおすすめです。
mask-compositeは、強力なCSSプロパティですが、万能ではありません。代替方法を理解しておくことで、状況に応じて最適な方法を選択することができます。
- 最新の情報については、MDN Web Docsなどのリソースを参照してください。
- どの方法を選択するにしても、パフォーマンスと互換性を考慮する必要があります。
- 上記の代替方法は、それぞれ一長一短があります。