CSSマスク - mask

こんにちは、未来のCSSマスターたち！今日は、CSSマスクの魅力的な世界に飛び込みます。あなたが魔术師で、ウェブページの一部を消したり、興味深い方法で表示したりしたいと考えているとします。まさにそれがCSSマスクが私たちに許可するすることです！那么、魔术師の帽子をかぶり、CSSのトリックを学びましょう！

CSSマスクとは？

CSSマスクは、ウェブ要素に見えないスチルを用いるようなものです。他の画像や形状に基づいて、要素の一部を隠すまたは部分的に表示することができます。これは非常に強力な技術で、非常にクールな効果を作成することができます！

使用可能な値

コードを始める前に、maskプロパティで使用できるさまざまな値を見てみましょう。これらはそれぞれ独特な効果を作り出す魔法の杖のようなものです：

値	説明
none	マスクは適用されません
<mask-reference>	マスク画像を参照
<masking-mode>	マスクの適用方法を決定
<position>	マスクの位置を設定
<bg-size>	マスクのサイズを定義
<repeat-style>	マスクの繰り返し方法を指定
<geometry-box>	マスクボックスを定義
no-clip	マスクの剪辑を防止

これらが今は混乱するかもしれませんが、後でそれぞれの例で探索します！

適用範囲

maskプロパティはあらゆる要素に適用できます。すべてに効く魔法の杖のようなものです！

シntax

maskプロパティの基本的な構文は以下の通りです：

.element {
mask: <value>;
}

さて、それぞれの値を詳しく見てみましょう。

CSS mask - none値

none値はシンプルです。マスクが適用されません。魔术の杖を使わないことに決めるようなものです。

.no-mask {
mask: none;
}

このコードは単純にブラウザに「この要素にマスクを適用しない」と伝えます。

CSS mask - <mask-reference>

ここからが本格的な魔术の始まりです！<mask-reference>は画像やCSSグラデーションで、要素のどの部分が表示されるべきかを定義します。

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

これらの例では、画像ファイル('mask.png')または線形グラデーションをマスクとして使用しています。マスクの黒い部分は要素を表示し、透明な部分は隠します。

CSS mask - <masking-mode>

マスクモードは、マスクの適用方法を決定します。2つの値があります：alphaとluminance。

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha：マスク画像のアルファチャンネルを使用します。
• luminance：マスク画像の輝度（明るさ）を使用します。

CSS mask - <position>

バックグラウンド画像と同様に、マスクの位置を設定できます：

.positioned-mask {
mask-position: center;
/* または */
mask: url('mask.png') center;
}

これはマスクを要素の中央に配置します。任意の有効なCSS位置値を使用できます。

CSS mask - <bg-size>

マスクのサイズも制御できます：

.sized-mask {
mask-size: cover;
/* または */
mask: url('mask.png') cover;
}

これはマスクを要素全体にカバーするようにします。具体的なサイズ（例：100px 200px）も使用できます。

CSS mask - <repeat-style>

要素がマスクよりも小さい場合、繰り返し方法を制御できます：

.repeating-mask {
mask-repeat: repeat-x;
/* または */
mask: url('mask.png') repeat-x;
}

これはマスクを水平方向に繰り返します。

CSS mask - <geometry-box>

幾何学的なボックスは、マスクがカバーする領域を定義します：

.box-mask {
mask-clip: padding-box;
/* または */
mask: url('mask.png') padding-box;
}

これは要素のパディングボックスにマスクを適用します。

CSS mask - <geometry-box> | no-clip

no-clip値は、マスクが要素の境界に剪辑されるのを防止します：

.no-clip-mask {
mask-clip: no-clip;
/* または */
mask: url('mask.png') no-clip;
}

これはマスクが要素の境界を超えて延伸することを許可します。

CSS mask - 関連プロパティ

maskに関連するいくつかのプロパティがあり、さらに細かい制御を提供します：

プロパティ	説明
mask-image	マスク画像を指定
mask-mode	マスクモードを設定
mask-repeat	マスクの繰り返し方法を制御
mask-position	マスクの位置を設定
mask-clip	マスクの描画領域を決定
mask-origin	マスクの原点を設定
mask-size	マスクのサイズを指定
mask-composite	マスクの組み合わせ方法を定義

これらのプロパティは、短形式のmaskプロパティの各部分に対応しています。

そして、あなたが若いCSS魔术師！CSSマスクの基本を学びました。忘れないでください、どんな魔术も練習が必要です。ですから、実験を恐れず、自分だけの魔法のようなウェブデザインを作成してください！

私が教師としての年月を重ねて見つけたのは、実際にやることで学ぶのが一番です。それで、楽しい課題を一つ用意しました：グラデーションマスクを使用して「リveal」効果を作成してみてください。マウスを画像に重ねると、完全に表示されるようにします。まるでカーテンを引いて隠された絵を見せるようなものです！

ハッピーコーディング、そしてあなたのマスクが常に完璧にフィットするようでありますように！

Credits: Image by storyset