CSSで“切り抜く”あれこれ (clip-pathとmask-imageの違い)
WEB制作で要素を「特定の形に切り抜く」テクニックについて再確認する機会があったので共有します。
CSSで切り抜くメリット
画像などの素材を予め任意の形に切り抜いておく必要がなくなる
動画をはじめとするあらゆる表示要素に適応可能
アニメーションなどと組み合わせることで、切り抜きの形が変わるなどより柔軟なデザインが可能
こうしたCSSで何かを「切りぬく」プロパティとして有名なのが、clip-pathとmask-imageですが、それぞれ特徴があります。
clip-pathプロパティを使う
任意の形の内側だけを表示領域にできるという優れたCSSプロパティです。
clip-pathプロパティは上記の値❶❷❸のいずれかを設定して使います。
図形ファイル(SVG)がある場合
任意の図形を形取ったSVG画像がある場合、imgタグで読み込むのではなく<svg>タグとしてHTMLにコードを直書きします。そこで下記のようにidをつけた<clipPathタグ>を内部に設け、そのidをclip-sourceの値として設定する仕組み。
<svg>
<clipPath id="clip_id">
....
</clipPath>
</svg>
clip-path:url(#clip_id)
基本的な図形の場合
上記の通り、形を作るための数値を入力します。
/*三角形*/
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
/*正円*/
clip-path: circle(50% at 50% 50%);
/*楕円形*/
clip-path: ellipse(25% 40% at 50% 50%);
図形の形を定める値を自分で入力するのが難しい場合、下記ジェネレーターを使えば任意の形のコードを自動で生成してくれます。コピペしましょう。
Clip-path各ブラウザサポート状況
2020年9月現在、多くの主要ブラウザでベンダープリフィックス必須、対応も内部SVGや基本図形のみとなっているので注意しましょう。
mask-imageを使う
既に切り抜く形をpng(背景透過)で作っているなど、上記clip-pathのようにsvgコードを書き出すのが難しい/嫌だという場合や、そもそもsvg画像じゃない場合はこちらの方法がおすすめです。
背景画像を設定するbackground-imageに全プロパティが酷似しているため、同様の方法で切り抜きたい画像に設定していきます。
<div class="mask"></div>
.mask{
mask-image:url(xxxxxx);
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
Mask-image各ブラウザサポート状況
やはりベンダープリフィックスが必要なのと、一部対応しきれていないプロパティがあるので注意しましょう。モダンブラウザであれば、サイズに関するプロパティや位置に関するプロパティは問題なく対応しています。
どちらも使えない場合
どうしてもIEに対応させなければいけない、プラグイン等で画像の表示の仕方が特殊で切り抜けない場合は、以下の方法になるのかなと思います。
・CSSによる切り抜きではなく、従来どおり背景透過素材をPhotoshop等で制作する
・切り抜きたい形の部分が透過したフレームを、positionなどで上から重ねて切り抜きに見せる
もしこのようにフレームをCSSで重ねる場合は、
・フレームを擬似要素で表示(positionとz-indexで手前に表示)
・境界部分がはみ出ないようにフレームを背景画像より少し大きくする
と良いと思います。
以上です。少しでもお役に立てば嬉しいです。
この記事が気に入ったらサポートをしてみませんか?