CSS でオーバーフロー スクロール グラデーションをマスターする

導入

この記事では次の技術スキルについて説明します:

このラボでは、CSS を使用してオーバーフロー要素にフェード グラデーションを追加する方法を学びます。このラボの目的は、スクロールすべきコンテンツがまだあるという視覚的な合図をユーザーに作成することです。 ::after 疑似要素と Linear-gradient() 関数を使用すると、透明から白にフェードするグラデーションを作成でき、表示する追加のコンテンツがあることを示します。

オーバーフロースクロールグラデーション

index.html と style.css は既に VM に提供されています。

オーバーフロー要素にフェージング グラデーションを追加し、スクロールするコンテンツがまだあることを示すには、次の手順に従います:

1. ::after 疑似要素を使用して、透明から白 (上から下) にフェードする Linear-gradient() を作成します。
位置:絶対、幅、高さを使用して、親内の擬似要素の位置とサイズを設定します。
pointer-events: none を使用してマウス イベントから疑似要素を除外し、その背後にあるテキストを引き続き選択可能/インタラクティブにできるようにします。

HTML と CSS のコード スニペットの例を次に示します:

リーリー リーリー

右下隅の「ライブに移行」をクリックして、ポート 8080 で Web サービスを実行してください。その後、

Web 8080タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！オーバーフロー スクロール グラデーションのラボが完了しました。 LabEx でさらに多くのラボを練習してスキルを向上させることができます。

---

？今すぐ練習: オーバーフロー スクロール グラデーション

---

もっと詳しく知りたいですか?

？最新の CSS スキル ツリーを学ぶ
？ CSS チュートリアルの続きを読む
？ Discord に参加するか、@WeAreLabEx でツイートしてください

以上がCSS でオーバーフロー スクロール グラデーションをマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。