背景クリッピング、マスク、および3Dを使用するクールなCSSホバー効果

CSSホバー効果への興味深いアプローチについての一連の投稿を見てきました。 私たちはから始めました CSSを使用する例の束 background プロパティ、次に移動します text-shadow プロパティどこ 技術的にはシャドウを使用しませんでした。 また、それらをCSS変数と組み合わせて calc() コードを最適化し、管理を容易にします。

この記事では、これら3つの記事を基に、さらに複雑なCSSホバーアニメーションを作成します。 背景のクリッピング、CSSマスク、さらにはXNUMXDパースペクティブで足を濡らすことについて話しています。 つまり、今回は高度なテクニックを探求し、CSSがホバー効果でできることの限界を押し広げます！

---

これが私たちが作っているもののほんの一部です：

を使用したホバー効果 background-clip

話しましょう background-clip。 このCSSプロパティは text キーワード値 これにより、グラデーションをに適用できます 클라우드 기반 AI/ML및 고성능 컴퓨팅을 통한 디지털 트윈의 기초 – Edward Hsu, Rescale CPO 많은 엔지니어링 중심 기업에게 클라우드는 R&D디지털 전환의 첫 단계일 뿐입니다. 클라우드 자원을 활용해 엔지니어링 팀의 제약을 해결하는 단계를 넘어, 시뮬레이션 운영을 통합하고 최적화하며, 궁극적으로는 모델 기반의 협업과 의사 결정을 지원하여 신제품을 결정할 때 데이터 기반 엔지니어링을 적용하고자 합니다. Rescale은 이러한 혁신을 돕기 위해 컴퓨팅 추천 엔진, 통합 데이터 패브릭, 메타데이터 관리 등을 개발하고 있습니다. 이번 자리를 빌려 비즈니스 경쟁력 제고를 위한 디지털 트윈 및 디지털 스레드 전략 개발 방법에 대한 인사이트를 나누고자 합니다. 実際の代わりに要素の 背景.

したがって、たとえば、ホバー時にテキストの色を変更することができます。 color プロパティですが、この方法で色の変化をアニメーション化します。

私がしたのは追加することだけでした background-clip: text 要素にそして transition 　 background-position。 それ以上に複雑にする必要はありません！

ただし、背景のクリッピング値が異なる複数のグラデーションを組み合わせると、より良い結果が得られます。

その例では、XNUMXつの異なるグラデーションとXNUMXつの値を使用します background-clip。 最初の背景のグラデーションがテキストにクリップされます（ text 値）ホバー時に色を設定し、XNUMX番目の背景グラデーションが下の下線を作成します（ padding-box 価値）。 他のすべてはからまっすぐにコピーされます 最初の記事で行った作業 このシリーズの。

テキストがスキャンされたように見えるようにバーが上から下にスライドし、色が付けられるホバー効果はどうですか。

今回は、最初のグラデーションのサイズを変更して線を作成しました。 次に、テキストの色を更新する他のグラデーションでスライドさせて、錯覚を作成します。 このペンで何が起こっているかを視覚化できます。

私たちは自分たちでできることのほんの表面をかじっただけです background-clippingパワー！ ただし、Firefoxには 報告されたバグの多く に関する background-clip。 Safariにもサポートの問題があります。 これで、Chromeだけがこのようなものをしっかりとサポートするようになるので、続行するときにChromeを開いておくとよいでしょう。

を使用して別のホバー効果に移りましょう background-clip:

あなたはおそらくこれが私たちが今カバーしたものと比較して非常に簡単に見えると思っているでしょう—そしてあなたは正しいです、ここに派手なものは何もありません。 私がしているのは、あるグラデーションをスライドさせながら、別のグラデーションのサイズを大きくすることだけです。

しかし、私たちは高度なホバー効果を見るためにここにいますよね？ マウスカーソルが要素を離れたときのアニメーションが異なるように、少し変更してみましょう。 ホバー効果は同じですが、アニメーションのエンディングが異なります。

かっこいいでしょ？ コードを分析してみましょう：

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

XNUMXつの背景レイヤーがあります—XNUMXつのグラデーションと background-color を使用して定義 --_c 最初にtransparentに設定される変数（#0000）。 ホバーすると、色が白に変わり、 --_c メインカラーに可変（--c).

これがその上で起こっていることです transition：最初に、すべてに遷移を適用しますが、遅延します color & background-color by 0.5s スライド効果を作成します。 その直後に、 color と background-color。 テキストはすでに白であり（最初のグラデーションのおかげで）、背景はすでにメインカラーに設定されているため（XNUMX番目のグラデーションのおかげで）、視覚的な変化に気付かない場合があります。

次に、マウスアウト時に、すべてにインスタント変更を適用します（ 0s 遅延）、ただし color & background-color トランジションがあります。 これは、すべてのグラデーションを初期状態に戻すことを意味します。 繰り返しになりますが、テキストが表示されるため、視覚的な変化はおそらく見られません。 color & background-color ホバーですでに変更されています。

最後に、色と色にフェードを適用します。 background-color アニメーションのマウスアウト部分を作成します。 理解するのは難しいかもしれませんが、さまざまな色を使用することで、そのトリックをより適切に視覚化できます。

上記を何度もホバーすると、ホバーでアニメーション化されているプロパティと、マウスアウトでアニメーション化されているプロパティが表示されます。 次に、同じホバー効果でXNUMXつの異なるアニメーションに到達した方法を理解できます。

忘れないで 私たちが使用したDRYスイッチング技術 このシリーズの以前の記事では、スイッチにXNUMXつの変数のみを使用して、コードの量を減らすのに役立てています。

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

メインカラーのRGB構文に到達した理由がわからない場合は、アルファ透明度で遊ぶ必要があったためです。 私も変数を使用しています --_t で使用される冗長な計算を減らすため transition プロパティ。

次のパートに進む前に、私がしばらく前に行ったホバー効果の例をさらに示します。 background-clip。 それぞれを詳しく説明するには長すぎますが、これまでに学んだことで、コードを簡単に理解できます。 コードを見ずにそれらのいくつかを単独で試すことは良いインスピレーションになる可能性があります。

分かってる。 これらはクレイジーで珍しいホバー効果であり、ほとんどの状況で多すぎることに気づきました。 しかし、これはCSSを実践して学ぶ方法です。 覚えておいてください 限界を押し上げる CSSホバー効果の。 ホバー効果は目新しいかもしれませんが、私たちは他のことに最も確実に使用できる新しい技術を途中で学んでいます。

CSSを使用したホバー効果 mask

何だと思う？ CSS mask プロパティは、同じようにグラデーションを使用します background プロパティがそうするので、次に作成するものは非常に簡単であることがわかります。

派手なアンダースコアを作成することから始めましょう。

私は使っています background そのデモでジグザグの下の境界線を作成します。 その下線にアニメーションを適用したい場合、背景プロパティのみを使用してそれを行うのは面倒です。

CSSを入力してください mask.

コードは奇妙に見えるかもしれませんが、ロジックは以前のすべての背景アニメーションで行ったものと同じです。 The mask XNUMXつのグラデーションで構成されています。 最初のグラデーションは、コンテンツ領域を覆う不透明な色で定義されます（ content-box 価値）。 この最初のグラデーションにより、テキストが表示され、ジグザグの下の境界線が非表示になります。 content-box は mask-clip と同じように動作する値 background-clip

linear-gradient(#000 0 0) content-box

XNUMX番目のグラデーションはエリア全体をカバーします（ padding-box）。 これは、を使用して定義された幅を持っています --_p 変数であり、要素の左側に配置されます。

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

今、私たちがしなければならないのは、の値を変更することです --_p ホバーすると、XNUMX番目のグラデーションのスライド効果が作成され、下線が表示されます。

.hover:hover { --_p: 100%; color: var(--c);
}

次のデモでは、マスクレイヤーを背景として使用して、トリックが行われていることをよりよく確認します。 緑と赤の部分が要素の可視部分であり、他のすべてが透明であると想像してください。 これは、同じグラデーションを使用した場合にマスクが行うことです。

このようなトリックを使用すると、さまざまなグラデーション構成を使用するだけで、さまざまなバリエーションを簡単に作成できます。 mask プロパティ：

そのデモの各例では、わずかに異なるグラデーション構成を使用しています。 mask。 また、バックグラウンド構成とマスク構成の間のコードの分離にも注意してください。 それらは独立して管理および保守できます。

代わりに、ジグザグの下線を波状の下線に置き換えて、背景構成を変更しましょう。

ホバー効果の別のコレクション！ すべてのマスク構成を維持し、背景を変更して別の形状を作成しました。 今、あなたは私がどのようにできたかを理解することができます 400のホバー効果に到達する 疑似要素なし—そして私たちはまだもっと持つことができます！

のように、なぜこのようなものではないのですか？

これがあなたにとっての挑戦です： その最後のデモの境界線は、 mask それを明らかにするためのプロパティ。 アニメーションの背後にあるロジックを理解できますか？ 一見複雑に見えるかもしれませんが、グラデーションに依存する他のほとんどのホバー効果について見てきたロジックと非常によく似ています。 コメントにあなたの説明を投稿してください！

3Dでのホバー効果

単一の要素で（そして疑似要素に頼らずに！）3D効果を作成することは不可能だと思うかもしれませんが、CSSにはそれを実現する方法があります。

表示されているのは、実際の3D効果ではなく、CSSを組み合わせた3D空間での2Dの完全な錯覚です。 background, clip-path, transform プロパティ。

最初に行うことは、変数を定義することです。

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

次に、上記の変数を使用する幅の透明な境界線を作成します。

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

要素の上部と右側は両方とも等しい必要があります --b 値は、下側と左側がの合計に等しくなる必要があります --b & --d （これは --_s 変数）。

トリックのXNUMX番目の部分では、以前に定義したすべての境界領域をカバーするXNUMXつのグラデーションを定義する必要があります。 A conic-gradient そのために動作します：

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

トリックのXNUMX番目の部分に別のグラデーションを追加します。 これは、最初の前のグラデーションと重なるXNUMXつの半透明の白い色の値を使用して、メインカラーのさまざまな色合いを作成し、色合いと奥行きの錯覚を与えます。

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

最後のステップは、 CSS clip-path その長い影のような感じのために角を切るために：

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

それで全部です！ 3つのグラデーションとXNUMXつのグラデーションだけでXNUMXD長方形を作成しました clip-path CSS変数を使用して簡単に調整できること。 今、私たちがしなければならないのはそれをアニメートすることだけです！

前の図（赤で示されている）の座標に注意してください。 それらを更新してアニメーションを作成しましょう。

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

秘訣は、要素の下部と左側の部分を非表示にして、残りのすべてが奥行きのない長方形の要素になるようにすることです。

このペンは、 clip-path アニメーションの一部を見て、それが何をしているのかを確認します。

最後の仕上げは、を使用して要素を反対方向に移動することです translate —そして幻想は完璧です！ さまざまな深さに対してさまざまなカスタムプロパティ値を使用した場合の効果は次のとおりです。

XNUMX番目のホバー効果は同じ構造に従います。 私がしたのは、いくつかの値を更新して、右上の動きではなく左上の動きを作成することだけです。

効果を組み合わせる！

私たちがカバーしたすべての素晴らしい点は、それらがすべて互いに補完し合うことです。 これが私が追加している例です 　 text-shadow XNUMX番目の記事からの効果 シリーズの background 最初の記事からのアニメーション技術 先ほど説明した3Dトリックを使用している間：

実際のコードは最初は混乱するかもしれませんが、先に進んでもう少し詳しく調べてください。これは、これらXNUMXつの異なる効果の単なる組み合わせであり、ほとんど一緒になっていることに気付くでしょう。

この記事を最後のホバー効果で締めくくります。ここでは、背景、クリップパス、および perspective 別の3D効果をシミュレートするには：

同じ効果を画像に適用したところ、単一の要素で3Dをシミュレートするのに非常に良い結果が得られました。

その最後のデモがどのように機能するかを詳しく調べたいですか？ 私はそれに何かを書きました。

包み込む

ああ、これで完了です。 私は知っています、それは多くのトリッキーなCSSですが、（1）私たちはその種のものに適したWebサイトにいます、そして（2）目標は、さまざまなCSSプロパティの理解をそれらが相互作用できるようにすることによって新しいレベルに押し上げることですお互いに。

この小さな一連の高度なCSSホバー効果を締めくくる今、ここから次のステップは何かと疑問に思われるかもしれません。 次のステップは、私たちが学んだことをすべて取り入れて、ボタン、メニュー項目、リンクなどの他の要素に適用することだと思います。その正確な理由から、トリックを見出し要素に限定する限り、物事をかなり単純に保ちました。 ; 実際の要素は重要ではありません。 概念を取り入れて実行し、新しいことを作成、実験、学習します。

---

背景クリッピング、マスク、および3Dを使用するクールなCSSホバー効果 最初に公開された CSSトリック。 あなたがすべき ニュースレターを入手する.

• コインスマート。 ヨーロッパで最高のビットコインと暗号通貨取引所。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 出入り自由。
• CryptoHawk。 アルトコインレーダー。 無料トライアル。
• ソース：https：//css-tricks.com/css-hover-effects-background-masks-3d/