CSS でクリッピングを使用すると、デザイン内のすべてが箱のように見えることを回避できます。さまざまな基本シェイプや SVG を使用して、クリップパスを作成できます。次に、表示したくない要素の部分を切り取ります。
ウェブページ上の要素はすべて、長方形のボックス内で定義されます。しかし、だからといってすべてを箱のように見せる必要があるわけではありません。
CSS の clip-path
プロパティを使用すると、画像やその他の要素の一部をクリップで除去できます。
面白いエフェクトを作成できます。
上記の例では、バルーン画像は正方形です(ソース)。clip-path
と circle()
の基本シェイプ値を使用する
風船の周りの空が切り取られ、ページ上に円形の画像が残ります。
この画像はリンクなので、clip-path
プロパティに関するその他の情報もわかります。
クリックできるのは画像の表示領域のみですが、
画像の非表示部分ではイベントが起動しないためです。
クリップは、画像だけでなく、すべての HTML 要素に適用できます。
clip-path
を作成する方法はいくつかありますが、この投稿ではその方法について説明します。
ブラウザの互換性
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
従来のブラウザでは、代わりにブラウザが clip-path
プロパティを無視し、クリップされていない画像を表示できるようにする方法もあります。
これが問題になる場合は、機能クエリで clip-path
をテストし、サポートされていないブラウザ用に代替レイアウトを提供できます。
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
基本的なシェイプ
clip-path
プロパティは複数の値を取ることができます。
最初の例で使用した値は circle()
です。
これは、CSS シェイプ仕様で定義されている基本的なシェイプ値の 1 つです。領域をクリップしたり
また、shape-outside
に同じ値を使用して、テキストがその図形を囲むようにします。
基本的なシェイプの完全なリストは次のとおりです。
inset()
inset()
値は、要素の端からクリップ領域を設定します。
上端、右端、下端、左端の値を渡すことができます。
border-radius
を追加して、クリップ領域の角を曲げることもできます。
round
キーワードを使用します。
この例では、2 つのボックスがあり、どちらもクラスが .box
です。1 つ目のボックスはクリップされておらず、2 つ目のボックスは inset()
値を使用してクリップされています。
circle()
ご覧のとおり、circle()
値は円形の切り抜き領域を作成します。1 つ目の値は長さまたはパーセンテージで、円の半径です。
オプションの 2 つ目の値を使用すると、円の中心を設定できます。
以下の例では、キーワード値を使用して、切り抜かれた円の右上を設定しています。
長さや割合も使用できます。
平らな面に注意してください。
これらすべての値により、要素の余白ボックスによってシェイプがクリップされることに留意してください。 画像に円を作成して、その形状が画像の自然なサイズの外側に広がると、エッジが平らになります。
ellipse()
楕円は押しつぶされた円で
これは circle()
とよく似ていますが、x の半径と y の半径を受け入れます。
楕円の中心の値を足した値。
polygon()
polygon()
値を使用すると、かなり複雑なシェイプを作成できます。
必要な数のポイントを定義し、
各点の座標を設定します
ポリゴンの作成と使用方法については、Clippy をご覧ください。
clip-path
ジェネレータ
コードをコピーしてプロジェクトに貼り付けます。
ボックス値の形状
ボックス値のシェイプも CSS シェイプで定義されています。
これらは CSS ボックス モデル(コンテンツ ボックス、パディング ボックス、ボーダー ボックス、
キーワード値 content-box
、border-box
、padding-box
、margin-box
を含むマージン ボックス。
これらの値は単独で使用することも、基本的なシェイプと一緒に使用して、シェイプで使用する参照ボックスを定義することもできます。 次の例では、シェイプがコンテンツの端までクリップされます。
.box {
clip-path: content-box;
}
この例では、円が基準ボックスとして margin-box
(デフォルト)ではなく content-box
を使用します。
.box {
clip-path: circle(45%) content-box;
}
現在のところ、ブラウザでは clip-path
プロパティのボックス値の使用はサポートされていません。
ただし、shape-outside
ではサポートされています。
SVG 要素を使用する
基本的なシェイプよりも細かくクリップ領域をコントロールするには、
SVG の clipPath
要素を使用します。
次に、url()
を clip-path
の値として使用して、その ID を参照します。
クリップ領域をアニメーション化する
CSS の遷移とアニメーションを clip-path
に適用して、興味深い効果を作成できます。次の例では、半径の値が異なる 2 つの円の間でカーソルを合わせることで、円をアニメーション化しています。
アニメーションでクリッピングする方法は数多くあります。 CSS Tricks で、クリップパスを使ったアニメーション化のアイデアを参考にしてみましょう。
写真撮影: Matthew Henry(Burst)