クリッピング、クリッピング、およびクリッピング！

CSS clip-path属性の魔法の使用：さまざまな創造的なテクニックとアプリケーションケースを探索します。この記事ではclip-path属性を使用して達成された一連の興味深い効果を共有し、プロジェクトに適用したり、創造的な試みをしたりすることを望んでいます。

これは、CSS-Tricksに関する著者が発行したclip-pathに関する3番目の記事です。背景を知りたい場合は、まず次の記事を読むことができます。

• CSS clip-pathを使用してインタラクティブエフェクトを作成します
• CSS clip-path 、パート2を使用してインタラクティブエフェクトを作成します

この記事では、新しいアイデアを紹介します！

創造的なもの：ダブルカット

巧妙なトリックはclip-path複数回使用してコンテンツをトリミングすることです。これは明らかに聞こえるかもしれませんが、実際にはこの概念を使用する人はほとんどいません。

たとえば、拡張されたメニューを見てみましょう。

clip-path単一のDOMノードに1回のみ適用できます。ノードは、同じCSSルールの複数のアクティブインスタンスを同時に持つことはできません。つまり、各インスタンスにはclip-pathが1つしかないことを意味します。ただし、組み合わせた作物ノードが組み合わされた回数に上限はありません。たとえば、aをカットできます<div>別のクロップに入れられます<code><div>内部など。 DOMノードの先祖の関係では、多くの独立した作物を適用できます。これはまさに上記のデモで行われていることです。 1つのトリミングされたノードが別のトリミングノードを埋めます。親ノードは境界として機能し、スケーリング時に子ノードが親ノードを埋めます。これにより、丸いメニューの異常な効果が生成されます。それを<code>overflow: hidden 。

もちろん、SVGはこの目的により適していると考えることができます。 clip-pathと比較して、SVGはより多くの機能を達成できます。これには、滑らかなズームが含まれます。 clip-path Bezier Curveを完全にサポートする場合、状況は異なります。しかし、執筆時点ではそうではありません。とにかく、 clip-path非常に便利です。ノード、CSSルールを使用すると、開始できます。上記のデモに関する限り、 clip-pathジョブを行うため、実行可能なオプションです。

メニューが内部的にどのように機能するかを説明するために短いビデオを作成しました。

クリエイティブ2：スケールクリッピングパス

もう1つの（あまり明白ではない）トリックは、スケーリングにclip-pathを使用することです。実際にCSSトランジションを使用して、 clip-pathをアニメーション化できます！

遷移システムは、それがどのように構築されるかにおいて驚くべきものです。私の意見では、その追加は、近年のWebテクノロジーの開発における最大の飛躍の1つです。さまざまな値の遷移をサポートします。 clip-pathは、アニメーションができる許容可能な価値です。アニメーションは通常、2つの極端な値間の補間を意味します。 clip-pathの場合、これは2つの完全に異なるパス間の補間を意味します。これは、Webの素晴らしいアニメーションシステムがその利点を示している場所です。単一の値だけでなく、アニメーション値セットでも機能します。

clip-pathをアニメーション化するとき、各座標は個別に補間されます。これは非常に重要です。 clip-pathアニメーションは一貫した滑らかに見えます。

デモを見てみましょう。効果を再起動するには、画像をクリックしてください。

このデモでは、 clip-pathトランジションを使用しました。小さな領域を覆う1つのclip-pathから別の巨大なclip-pathまでスケーリングするために使用されます。 clip-pathの最小バージョンは解像度よりもはるかに小さいです。つまり、適用されたときに肉眼では見えません。他の極端な値は、ビューポートよりもわずかに大きいです。このズームレベルでは、目に見える領域の外ですべての作物が発生するため、目に見える作物はありません。これら2つの異なるclip-path間でアニメーション化すると、興味深い効果があります。トリミングされた形状は、スケーリングされたときにその背後にあるものを示しているように見えます。

このデモが異なる形状を使用していることに気付いたかもしれません。この場合、人気のスニーカーブランドのロゴを使用しました。これにより、より現実的なシナリオでどのように機能するかについてのアイデアが得られます。

同様に、ここに技術的な詳細を詳細に説明するビデオがあります。

クリエイティブ3：作物オーバーレイ

別のアイデアは、 clip-pathを使用してハイライト効果を作成することです。たとえば、 clip-pathを使用してメニューのアクティブな状態を作成する必要があるとします。

上のクリッピングパスは、アニメーション化するときに異なるメニューオプション間で拡張されます。さらに、UIを際立たせるために興味深い形状を使用しました。

このデモは、コピーが既存のコンテンツの上部にある同じコンテンツの変更されたコピーを使用します。メニューユニットとまったく同じ位置にあり、アクティブ状態として使用されます。基本的に、メニューの他の通常のアクティビティ状態のように見えます。違いは、HTML要素で派手なCSSスタイルを使用する代わりに、 clip-pathを使用して作成されることです。

clip-pathを使用して、ここでいくつかの異常な効果を作成します。傾斜した形状は1つの側面ですが、ストレッチ効果も得られます。このメニューには、左側に1つ、右側に1つの独立した作物があります。これにより、遷移遅延を使用して、作物をさまざまな時期にアニメーション化できます。その結果、非常にリラックスしたストレッチアニメーションができます。デフォルトの緩和は非線形であるため、遅延はわずかな輪ゴム効果につながる可能性があります。

ここでの2番目のトリックは、方向に応じて遅延を適用することです。アクティブな状態が右に移動する必要がある場合、右側は最初にアニメーションを開始する必要があり、その逆も同様です。小さなJavaScriptを使用して、クリックに基づいて正しいクラスを適用することにより、方向性の認識を得ます。

クリエイティブ4：スライススライス

Web上で循環的に拡大するメニューがどのくらいの頻度で見られますか？ばかげて、そうです！ ？まあ、 clip-pathそれを可能にするだけでなく、非常に簡単です。

通常表示されるメニューには、以前に見た最初のトリックのように、シングルラインまたはドロップダウンメニューに配置されたリンクが含まれています。ここで私たちがしていることは、これらのリンクを長方形ではなくアークに置くことです。もちろん、長方形の使用は伝統的な方法です。ここでのアイデアは、よりモバイルに優しい相互作用を探求し、2つの特定のUX原則を念頭に置いていることです。

• 明確な目標、親指でクリックしやすい
• 変化は焦点の近くで発生します - あなたの視覚的な焦点は

このデモンストレーションはclip-pathを特に目的としていません。たまたまclip-pathを使用してペンを作成しました。繰り返しますが、以前の拡張可能なメニューデモのように、これは便利な質問です。 clip-pathと50％の境界半径を使用して、すぐに必要なアークを取得しました。

クリエイティブファイブ：トグルボタン

トグルボタンは、常に私たちのようなWeb開発者を驚かせます。新しいトグルボタンの説明が毎週導入されるようです。わかりました、これは私のものです：

このデモは、Oleg FrolovによるDribbleスクリーンショットのリメイクです。この記事に記載されている3つの手法すべてを組み合わせています。これらは：

• ダブルカット
• スケーリングクリップパス
• 作物オーバーレイ

これらのスイッチにはすべて、共通点が1つあるようです。それらは、実際の機械的スイッチに似た楕円形の背景と円で構成されています。このトグルボタンの仕組みは、円形容器内の円形のclip-pathを拡大することです。コンテナはoverflow: hiddenつまり、二重作物。

デモのもう1つの重要な部分は、タグに2つの交互のバージョンを使用することです。それらはオリジナルのバージョンであり、彼らの陰陽反転ミラーリングコピーです。 1つのバージョンの代わりに2つのバージョンを使用することは、繰り返しのリスクを冒すということです。これは便利な問題です。両方のバージョンを使用すると、最初のバージョンのトランジションを作成するだけです。次に、2番目のバージョンでこれのほとんどを繰り返すことができます。トランジションの最後に、トグルボタンは反対のバージョンに切り替わります。逆バージョンは前の終了状態と同じであるため、変更は見つかりません。この手法の利点は、アニメーションの一部を再利用することです。不利な点は、アニメーションが中断されるとst音が出るということです。これは、アニメーションが完了する前にユーザーがトグルボタンを押したときに発生します。

もう一度舞台裏を見てみましょう：

結論

あなたは思うかもしれません：探検は一つのことですが、生産はどうですか？現在取り組んでいるウェブサイトでclip-pathを使用できますか？生産に入る準備はできていますか？

まあ、この質問に対する簡単な答えはありません。とりわけ、慎重に研究する必要があるもう2つの問題があります。

1. ブラウザのサポート
2. パフォーマンス

執筆時点では、Caniuseによると、ブラウザの約93％がそれをサポートしています。私たちは大規模な採用の危機にonしていると思います。この番号は、WebKitプレフィックスを考慮していることに注意してください。

IEからの議論もありますが、それは本当に私にとっての議論ではありません。 IEの余分な努力が何を意味するのかわかりません。安全でないブラウザの回避策を作成する必要がありますか？ユーザーは、最新のブラウザを使用する方が良いでしょう。もちろん、レガシーと見なす必要があるいくつかのまれな状況があります。しかし、これらの場合、最新のCSSの使用をまったく検討しないことができます。

それで、パフォーマンスはどうですか？さて、物事がますます増えるにつれて、パフォーマンスは難しくなりますが、今日はclip-pathを使用するのを止めるものは何もないとは言いません。常に測定されるパフォーマンスが重要です。平均して、 clip-path 、他のCSSルールよりもパフォーマンスの影響が大きくなる可能性があります。しかし、ここで紹介している慣行は、法律ではなくアドバイスであることを忘れないでください。それらを提案と考えてください。パフォーマンスを測定する習慣を身につけます。

先に進んで、ページを細かく切り取ります。何が起こるか見てください！