ソフトエッジ コンテンツ フェード

ウェブ機能: マスク

概要

コンテナの端に透明度のグラデーションを適用するには（スクロール可能なコンテンツがさらにあることを示す場合や、テキストをフェードアウトする場合など）、線形グラデーションで CSS マスキングを使用します。この方法は、半透明のオーバーレイを使用するよりも優れています。コンテンツ自体がフェードアウトするため、テキストの選択やポインタ イベントを妨げることなく、背景が自然に透けて見えるようになります。

実装

ソフトエッジ フェードを実装するには:

コンテナの下端をフェードする

これは、スクロール可能な領域にさらにコンテンツがあることを示すのに役立ちます。

.container {
  /* Enable scrolling */
  overflow-y: auto;
  
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  
  /* Standard property for modern browsers */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

上端と下端の両方をフェードする

複数のカラーストップを持つ単一のグラデーションを使用して、両端をフェードできます。

.dual-fade-container {
  /* Content is visible between 10% and 90% of the height */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

代替戦略

ブラウザが mask-image または接頭辞付きのバージョンをサポートしていない場合:

  • コンテンツはフェードせず、エッジがシャープに表示されます。
  • フェードがなくてもインターフェースが機能し、コンテンツが読み取れることを確認します（プログレッシブ エンハンスメント）。
  • 代替として半透明のオーバーレイを使用することもできますが、背景色を把握しておく必要があります。また、pointer-events: none を使用しない限り、テキストの選択に影響する可能性があります。
/* Fallback using an overlay for browsers that do not support masking */
@supports (not (mask-image: linear-gradient(to bottom, black, transparent))) and (not (-webkit-mask-image: linear-gradient(to bottom, black, transparent))) {
  .container {
    position: relative;
  }
  
  .container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    /* Fallback assumes a solid background color (e.g., white) */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none; /* Allow interaction with text underneath */
  }
}