どのくらいの頻度で CSS にアクセスしますか background-size 財産？ あなたが私のような人なら、そしておそらく他の多くのフロントエンドの人々なら、たいていの場合、 background-size: cover 要素全体のスペースを埋める画像。
さて、私は、より高度な背景のサイジングを必要とする興味深い課題を提示されました。それは、ホバー時に遷移する背景ストライプです。 これを確認して、カーソルを合わせてください。
背景のサイズよりも多くのことが行われていますが、それがストライプを遷移させるために必要なトリックでした. どうやってそこにたどり着いたのかをお見せしたいと思いました。それは、それが本当に素晴らしい視覚効果だと思うからだけでなく、皆さんが楽しめると思うグラデーションとブレンド モードで創造性を発揮する必要があったからです。
物事をシンプルに保つために、非常に基本的なセットアップから始めましょう。 シングルの話してる <div> 緑色の正方形としてスタイル設定された HTML で:
<div></div>div { width: 500px; height: 500px; background: palegreen;
}
背景ストライプの設定
これらの縞模様を見たときに CSS の線形グラデーションを思いついた場合は、すでに同じページにいます。 この場合、ストライプが不均等な量のスペースを占めて遷移するようにするため、繰り返しグラデーションを正確に実行することはできませんが、既存の背景色の上に XNUMX つの背景をチェーンし、それらを一番上に配置することで、XNUMX つのストライプを作成できます。 -コンテナの右側:
div { width: 500px; height: 500px; background: linear-gradient(black, black) top right, linear-gradient(black, black) top 100px right, linear-gradient(black, black) top 200px right, linear-gradient(black, black) top 300px right, linear-gradient(black, black) top 400px right, palegreen;
}私は横縞を作りましたが、ここで扱っている方法で縦縞にすることもできます。 そして、カスタム プロパティを使用して、これをかなり単純化できます。
div { --gt: linear-gradient(black, black); --n: 100px; width: 500px; height: 500px; background: var(--gt) top right, var(--gt) top var(--n) right, var(--gt) top calc(var(--n) * 2) right, var(--gt) top calc(var(--n) * 3) right, var(--gt) top calc(var(--n) * 4) right, palegreen;
}だから、 --gt 値は勾配であり、 --n は、ストライプを下に微調整して垂直方向にオフセットするために使用する定数です。 お気づきかもしれませんが、私は本当のグラデーションを設定していませんが、 linear-gradient() function — これは意図的なものであり、その理由については後で説明します。
先に進む前にもう XNUMX つすべきことは、背景が繰り返されないようにすることです。 それ以外の場合は、スペース全体を並べて塗りつぶします。
div { --gt: linear-gradient(black, black); --n: 100px; width: 500px; height: 500px; background: var(--gt) top right, var(--gt) top var(--n) right, var(--gt) top calc(var(--n) * 2) right, var(--gt) top calc(var(--n) * 3) right, var(--gt) top calc(var(--n) * 4) right, palegreen; background-repeat: no-repeat;
}設定することもできました background-repeat セクションに background 省略形ですが、読みやすくするためにここで分割することにしました。
ストライプのオフセット
技術的にはストライプがありますが、ストライプの間に間隔がなく、コンテナ全体を覆っているため、見分けるのはかなり困難です. 真っ黒な四角があるようなものです。
ここで、 background-size 財産。 ストライプの高さと幅の両方を設定したいのですが、プロパティはそれを正確に行うことができる XNUMX つの値の構文をサポートしています。 そして、これらのサイズをカンマで区切ることで、同じ方法で連鎖させることができます background.
最初に幅を設定することから始めましょう。 の単一値構文の使用 background-size 幅を設定し、デフォルトの高さを auto. ここでは完全に任意の値を使用しているため、設計に最適な値に設定してください。
div { --gt: linear-gradient(black, black); --n: 100px; width: 500px; height: 500px; background: var(--gt) top right, var(--gt) top var(--n) right, var(--gt) top calc(var(--n) * 2) right, var(--gt) top calc(var(--n) * 3) right, var(--gt) top calc(var(--n) * 4) right, palegreen; background-repeat: no-repeat; background-size: 60%, 90%, 70%, 40%, 10%;
}私と同じ値を使用している場合は、次のようになります。
すべてのストライプの幅を設定したように見えませんか? それは auto 単一値構文の高さの動作。 XNUMX 番目のストライプは、その下の他のストライプよりも幅が広く、それらを覆っています。 作業が見えるように高さを設定する必要があります。 それらはすべて同じ高さである必要があり、実際に再利用できます --n 繰り返しますが、単純にするために次のようにします。
div { --gt: linear-gradient(black, black); --n: 100px; width: 500px; height: 500px; background: var(--gt) top right, var(--gt) top var(--n) right, var(--gt) top calc(var(--n) * 2) right, var(--gt) top calc(var(--n) * 3) right, var(--gt) top calc(var(--n) * 4) right, palegreen; background-repeat: no-repeat; background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}ああ、ずっといい！
ストライプ間にギャップを追加する
デザインがストライプ間にギャップを必要としない場合、これは完全にオプションのステップですが、私の場合は必要であり、過度に複雑ではありません. 各ストライプの高さを変更します background-size 値を小さくして、垂直方向のスペース全体を埋めるには不十分です。
引き続きご利用いただけます --n 変数ですが、少量を減算します。 5px、使用して calc() 私たちが欲しいものを手に入れるために。
background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);これは、別の変数を使用して排除できる多くの繰り返しです。
div { --h: calc(var(--n) - 5px); /* etc. */ background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}マスキングとブレンディング
では交換してみましょう palegreen これまで視覚的な目的で使用してきた背景色は白です。
div { /* etc. */ background: var(--gt) top right, var(--gt) top var(--n) right, var(--gt) top calc(var(--n) * 2) right, var(--gt) top calc(var(--n) * 3) right, var(--gt) top calc(var(--n) * 4) right, #fff; /* etc. */
}このような白黒のパターンは、マスキングとブレンドに最適です。 そのためには、まず <div> 新しい親コンテナで、XNUMX 番目のコンテナを導入します <div> それの下に：
<section> <div></div> <div></div>
</section>ここで、CSS のリファクタリングを少し行います。 新しい親コンテナができたので、固定を渡すことができます width & height 私たちが使用していたプロパティ <div> そちら側：
section { width: 500px; height: 500px;
} また、CSS Grid を使用して XNUMX つを配置します。 <div> 要素を互いに重ねます。 これは、テマニ・アフィフが彼を作成するために使用するのと同じトリックです。 超クールな画像ギャラリー. アイデアは、コンテナ全体に両方の div を配置することです。 grid-area プロパティを開き、すべてを中央に揃えます:
section { display: grid; align-items: center; justify-items: center; width: 500px; height: 500px;
} section > div { width: inherit; height: inherit; grid-area: 1 / 1;
}では、これをチェックしてください。 前に黒から黒に変化するソリッド グラデーションを使用した理由は、XNUMX つのグラデーションをマスキングしてブレンドするための準備を整えるためです。 <div> レイヤー。 これは真のマスキングではありません。 mask プロパティですが、レイヤー間のコントラストによって、表示される色が制御されます。 白で覆われた領域は白のままで、黒で覆われた領域は漏れます。 ブレンドモードに関する MDN のドキュメント これがどのように機能するかについての素晴らしい説明があります。
それを機能させるために、最初に見たい実際のグラデーションを適用します <div> 最初のスタイルルールを適用しながら <div> 新しいもので、 :nth-child() 疑似セレクター：
div:nth-child(1) { background: linear-gradient(to right, red, orange); } div:nth-child(2) { --gt: linear-gradient(black, black); --n: 100px; --h: calc(var(--n) - 5px); background: var(--gt) top right, var(--gt) top var(--n) right, var(--gt) top calc(var(--n) * 2) right, var(--gt) top calc(var(--n) * 3) right, var(--gt) top calc(var(--n) * 4) right, white; background-repeat: no-repeat; background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}ここで停止すると、実際には以前のものと視覚的な違いは見られません。 これは、まだ実際のブレンドを行っていないためです。 それでは、今すぐそれを行いましょう screen ブレンドモード:
div:nth-child(2) { /* etc. */ mix-blend-mode: screen;
}この記事の冒頭で示したデモでは、ベージュの背景色を使用しました。 少し暗いオフホワイトのカラーリングにより、背景の残りの部分に少し色がにじんでいます。
ホバー効果
このパズルの最後のピースは、ストライプを全幅に広げるホバー効果です。 まず、セレクターを書きましょう。 親コンテナ (<section> 私たちの場合) がホバリングされています。 ホバーすると、XNUMX 番目に含まれるストライプの背景サイズが変更されます <div>:
/* When <section> is hovered, change the second div's styles */
section:hover > div:nth-child(2){ /* styles go here */
}を変更します background-size 同じ高さを維持しながら、ストライプをコンテナーの幅いっぱいにします。
section:hover > div:nth-child(2){ background-size: 100% var(--h);
}これにより、背景が全幅に「スナップ」されます。 少し加えると transition これに、ホバーするとストライプが展開されます。
section:hover > div:nth-child(2){ background-size: 100% var(--h); transition: background-size 1s;
}これが最後のデモです。
別のコンテキストでこれを使用するとどのように見えるかを示すために、そこにテキストを追加しただけです。 同じことを行う場合は、テキストの色とグラデーションで使用される色の間に十分なコントラストがあることを確認する価値があります。 WCAG ガイドライン. アクセシビリティについて簡単に触れていますが、それだけの価値はあります。 動きを減らすためのユーザーの好みを考慮する ホバー効果に関しては。
おしまいです！
かなりきれいですよね？ 確かにそう思います。 これについて私が気に入っているのは、メンテナンスとカスタマイズが非常に容易なことです。 たとえば、いくつかの値を変更することで、ストライプの高さ、色、および方向を変更できます。 色や幅など、さらにいくつかの要素を可変化して、さらに構成可能にすることもできます.
あなたがこれに別の方法でアプローチしたかどうか、私は本当に興味があります。 もしそうなら、コメントで共有してください！ どれだけバリエーションを集められるか楽しみだ。
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/animated-background-stripes-transition-hover/
