CSS3：クリップパス詳細説明_html/css_WEB-ITnose

私の生徒の 1 人である Heather Banks は、Squarespace で見たエフェクトを実現したいと考えていました:

彼女の過去の経験に基づいて、この Web サイトの HTML と CSS は完全に彼女の能力の範囲内だったので、私が彼女を手伝いました このエフェクトは完成しました。トリミングされたナビゲーションの効果を表示するのは簡単な作業ではありません。画像を見たときの私の最初の反応は、部分的にトリミングされた背景に一致する画像を作成し、それを後の要素として設定することでした。問題は、少なくとも反応性には対処する必要があるが、反応性は完全に制御可能ではないということです。

CSS プロパティを理解します:clip-path

clip-path は作業中のドラフトの一部であり、マスキングとクリッピングによって要素の一部を非表示にするためのツールです。クリップパスは主流のブラウザ (IE や Firefox を含む) ではサポートされていませんが、それでも Webkit ブラウザでスタイリッシュな効果を実現するための小さなツールです。

最新のブラウザでは -webkit- プレフィックスが必要であることに注意してください。

clip-path は、一連の X 値と Y 値を指定してパスを作成するだけで機能します。これらの値を使用して完全なパスを作成すると、画像はパスの内部寸法に合わせて切り取られます。

クリップパスを使用すると、円、楕円、多角形などのさまざまな形状を作成でき、創造性が唯一の制限です。

単純な三角形のクリッピング

codepen でコードを表示します
上記の効果を達成するには、要素上でクリップパスを使用するだけです:

.clipClass { -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); }

ステップバイステップ分析

位置決め属性と同様に、X を考慮する必要があります値と Y 値。 X:0 と Y:0 は、要素の左上隅から開始し、左上隅から移動することを意味します。 X:100% は要素の右側を指し、Y:100% は要素の底部を指します。
上記で作成したパスでは、実際に次のポイントが作成されます:

x: 0, y:100%x: 50%, y: 0x: 100%, y: 100%

この単純なパスは、左下隅から開始し、水平方向に 50% 移動し、上部の位置に到達し、次に水平方向に 100% の位置まで移動し、垂直方向に戻ります。一番下に進み、3 番目の座標点に到達します。三角が出てきます。

Shape

上の例では、ポリゴンを使用してシェイプを作成し、コンマ (,) で区切られた X 値と Y 値のペアを介してパスを定義しました。その後、さまざまな値を取得してさまざまなグラフを作成できます。

Circle

codepen でコードを表示する
円を作成するには、円の中心の座標 (X 値と Y 値) と半径。円の半径を定義する場合、at キーワードを使用して円の中心座標を定義できます。

.clipClass { -webkit-clip-path: circle(50% at 50% 50%); }

Ellipse

このコードを codepen で表示する
多くの場合、単純な円ではなく、楕円が必要です。

楕円を実装するには、楕円の x 軸半径、y 軸半径、楕円の位置の x 座標と y 座標の 4 つの値を楕円に指定する必要があります。後の 2 つの値は、at キーワードで最初の 2 つの値から区切られます。

.clipClass { -webkit-clip-path: ellipse(30% 20% at 50% 50%); }

Illustration

(古いバージョンのChromeのバグ)

codepenでコードを表示
多角形のエッジが鋭いので、希望どおりにならない可能性があります。作成したいのは角丸長方形なので、 Inset の値を見てください。 Inset は 4 つの値 (「上、右、下、左」の順序に対応) を使用して、角の半径を設定します。

.clipClass { -webkit-clip-path: inset(25% 0 25% 0 round 0 25% 0 25%); }

上記の値は以下に対応します:

inset(<top> <right> <bottom> <left> round <top-radius> <right-radius> <bottom-radius> <left-radius>)

省略形:

.clipClass { -webkit-clip-path: inset(25% 0 round 0 25%); }

クイックリファレンス

Circle: Circle(radius at x-axis y-axis)

Ellipse: ellipse(x-rad y-rad x 軸 y 軸)

ポリゴン: ポリゴン(x 軸 y 軸, x 軸 y 軸, … )

インセット: インセット(右上、左、上、半径、右、半径、下、半径left-radius)

シェイプの作成

ご覧のとおり、プロトタイプと丸みを帯びたシェイプはいくつかの値に制限されているため、複雑なシェイプを作成するにはポリゴンが最適です。ポリゴンは複数の点のセットを定義できるため、さまざまな方法でグラフィックスを切り取ることができます。

コミックテキストボックス

codepenでコードを表示

.clipClass {  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);}

Star

codepenでコードを表示

.clipClass {  -webkit-clip-path: polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);}

アニメーション

さまざまなグラフィックとその作成方法について学習しましたが、これらのグラフィックをどのように使用できるでしょうか望ましい効果は何ですか?
シェイプにホバーを適用し、トランジション プロパティを使用して滑らかな効果を作成します。ただし、作成する初期デフォルト状態では、すべてのホバー状態と同じ座標系を使用する必要があることに注意してください。
codepen でコードを表示

.animateClass {  -webkit-clip-path: polygon(20% 0%, 0% 0%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 0, 80% 0, 50% 0);}.animateClass:hover {  -webkit-clip-path: polygon(50% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);}