CSSマスク、シェイプ、3Dパースペクティブ
CSSマスク＆シェイプ プレイグラウンド
CSSマスク、shape-outside、3Dパースペクティブ（ライブデモ付き）| We.Inc
mask-imageのグラデーションで画像をフェードさせ、SVGマスクで形を切り抜き、shape-outsideで円に沿って文字を回り込ませます。clip-pathとmaskの比較や、3Dパースペクティブのシーン作りも紹介します。
CSSマスクは、画像の透明度を使って要素の一部を隠します。mask-image: linear-gradient(black, transparent)なら下に向かってフェードアウトします。shape-outsideは、隣の文字を長方形ではなく円や多角形に沿って回り込ませます。親にperspectiveを指定すると、回転した子要素に本物の奥行きが生まれます。プレイグラウンドでマスクを作ってコピーしましょう。
目的別の使い分け
- やわらかいフェードやスポットライト
- グラデーションのmask-image
- やわらかく、不透明度は自由
- アイコンやロゴの形の切り抜き
- SVGのmask-image
- 画像のアルファに従う
- 形に沿って流れる文字
- floatにshape-outside
- 文字のレイアウトに影響
- 3D回転の奥行き
- 親にperspective
- 切り抜きではない
まずはマスクのプレイグラウンドから。フェード、スポットライト、切り抜きの形を選び、サンプル画像の上で動かして、-webkit-接頭辞込みのCSSをコピーします。その下には、文字の回り込み、clip-pathとmaskの比較、小さな3Dシーンの編集できる例があり、どれもJavaScriptなしで動作します。
- マスクの種類を選びます：直線フェード、円形スポットライト、SVGシェイプ。
- 方向、位置、サイズ、やわらかさを調整します。プレビューはすぐに再描画されます。
- CSSをコピーします。mask-imageと-webkit-mask-imageの両方が含まれるので、古いSafariやChromiumでも動作します。
- 下にスクロールすると、shape-outside、clip-pathとの比較、パースペクティブのシーンがあり、どれもその場で編集できます。
- mask-imageでは、デフォルトでアルファチャンネルだけが意味を持ちます。黒やほかの不透明な色は表示、透明は非表示を意味します。
- mask-size、mask-position、mask-repeatは、backgroundのプロパティと同じように使えます。SVGマスクは、mask-repeat: no-repeatを指定しない限り繰り返されます。
- shape-outsideはfloatした要素でしか動作しません。要素自体もその形に見せたい場合は、同じclip-pathと組み合わせましょう。
- shape-marginを追加すると、回り込む文字を曲線から少し離せます。
よくある質問
clip-pathとmaskの違いは何ですか？
clip-pathは幾何学的な輪郭を描き、その外側をすべてくっきりと切り落とします。mask-imageは画像やグラデーションを使うので、輪郭をやわらかく、半透明にできます。多角形や円ならclip-pathのほうが簡単で、フェード、ぼかしたスポットライト、ロゴの形の切り抜きにはmaskが適しています。
-webkit-mask-imageはまだ必要ですか？
接頭辞なしのmaskプロパティは2023年後半にBaselineになりました。-webkit-版を併記しても損はなく、古いSafariやChromiumを使う訪問者にも効果が届きます。
shape-outsideが効かないのはなぜですか？
3つの点を確認してください。要素がfloatしていること、幅と高さがあること、形に画像を使う場合は同一オリジンかCORSヘッダー付きで配信されていることです。また、文字はfloatの反対側にしか回り込みません。
スクロールするリストの端をフェードさせるには？
スクロールコンテナにマスクを付けます：mask-image: linear-gradient(to bottom, black 85%, transparent)。最後の数行がフェードアウトし、続きがあることを示します。マスクはコンテンツではなくボックスと一緒に動きます。
perspectiveにはどんな値を指定すべきですか？
見る人からz = 0の平面までの距離です。カードなら600pxから1200px程度が自然に見えます。300pxのような小さい値は奥行きを誇張し、手前の端を強くゆがめます。
マスクが表示部分を決める仕組み
- ブラウザーはマスク画像を要素の上に重ね、その透明度を1ピクセルずつ読み取ります。マスクが完全に不透明な部分では要素が普通に表示され、完全に透明な部分では消え、半透明なら部分的に見えます。
- グラデーションは画像なので、linear、radial、conicのどのグラデーションもそのままマスクになります。複数のマスクをカンマで重ね、mask-compositeで組み合わせることもでき、たとえばフェードに穴を開けられます。
形に沿って文字を回り込ませる
- shape-outsideには、circle()、ellipse()、polygon()、inset()などの基本シェイプ、margin-boxなどのボックスキーワード、または透明なピクセルで形を決める画像を指定できます。曲線に沿うのは、floatの横を流れるインラインコンテンツだけです。
- float自体の描画には、引き続き長方形のボックスが使われます。文字を丸く押しのけるだけでなく写真も丸く見せるには、同じ要素にclip-path: circle(50%)かborder-radius: 50%を追加しましょう。
グラデーションマスク：フェードとスポットライト
ブロックの下部をフェードさせる
高さの50パーセントまでは完全に表示し、そこから何もない状態までなめらかにフェードします。
円形のスポットライト
円形グラデーションでやわらかい円を表示し、残りの模様を隠します。
SVGとデータURIのマスク
要素を星形に切り抜く
SVGをデータURIとしてインライン化しているので、追加のファイルは不要です。mask-size: containで星全体をボックス内に収めます。
マスクでアイコンファイルの色を変える
アイコンファイルは形だけを提供し、色はbackground-colorで決まります。1つのSVGで、すべてのテーマとホバー状態に対応できます。
shape-outside：形に沿って回り込む文字
円に沿って文字を回り込ませる
floatはshape-outsideで文字を押しのけ、border-radiusで丸く見えます。shape-marginで余白を加えています。
斜めの多角形に沿って文字を回り込ませる
同じ多角形が、見た目の切り抜き（clip-path）と文字の流れ（shape-outside）の両方を決めています。
clip-pathとmaskの比較
同じ円で、くっきりした輪郭とやわらかい輪郭
左はclip-path: circle()を使っています。右はぼかした輪郭の円形グラデーションマスクで、これはclip-pathにはできません。
clip-pathとmaskの比較
- 入力
- 基本シェイプまたはSVGの<clipPath>
- 任意の画像：グラデーション、PNG、SVG
- アニメーション
- 頂点数が同じシェイプ
- mask-positionとmask-size
小さな3Dパースペクティブのシーン
共通の3D空間で傾いたカード
ステージにperspective、グループにpreserve-3dを指定して3枚のカードを1つの空間に置き、translateZでそれぞれを異なる奥行きに押し出します。
maskプロパティ一覧
maskの個別プロパティとその役割
- マスクのサイズ（background-sizeと同様）
- 重ねたマスクの合成方法：add、subtract、intersect、exclude
円
星
ハート
ブロブ
マスク プレイグラウンド
マスクの種類
直線フェード
スポットライト
SVGシェイプ
マスクを適用した要素。市松模様の部分が隠れている場所です。
方向
完全に表示する範囲
中心 X
中心 Y
不透明な半径
ぼかし
形
マスクのサイズ
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る