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

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

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

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

創(chuàng)造的なもの：ダブルカット

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

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

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

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

メニューが內(nèi)部的にどのように機(jī)能するかを説明するために短いビデオを作成しました。

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

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

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

clip-pathをアニメーション化するとき、各座標(biāo)は個(gè)別に補(bǔ)間されます。これは非常に重要です。 clip-pathアニメーションは一貫した滑らかに見(jiàn)えます。

デモを見(jiàn)てみましょう。効果を再起動(dòng)するには、畫(huà)像をクリックしてください。

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

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

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

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

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

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

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

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

ここでの2番目のトリックは、方向に応じて遅延を適用することです。アクティブな狀態(tài)が右に移動(dòng)する必要がある場(chǎng)合、右側(cè)は最初にアニメーションを開(kāi)始する必要があり、その逆も同様です。小さなJavaScriptを使用して、クリックに基づいて正しいクラスを適用することにより、方向性の認(rèn)識(shí)を得ます。

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

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

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

• 明確な目標(biāo)、親指でクリックしやすい
• 変化は焦點(diǎn)の近くで発生します - あなたの視覚的な焦點(diǎn)は

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

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

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

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

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

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

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

もう一度舞臺(tái)裏を見(jiàn)てみましょう：

結(jié)論

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

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

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

執(zhí)筆時(shí)點(diǎn)では、Caniuseによると、ブラウザの約93％がそれをサポートしています。私たちは大規(guī)模な採(cǎi)用の危機(jī)にonしていると思います。この番號(hào)は、WebKitプレフィックスを考慮していることに注意してください。

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

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

先に進(jìn)んで、ページを細(xì)かく切り取ります。何が起こるか見(jiàn)てください！