Zanikanie treści przy miękkich krawędziach

Funkcje internetowe: Maski

Przegląd

Aby zastosować gradient przezroczystości do krawędzi kontenera (np. aby wskazać, że dostępnych jest więcej treści do przewinięcia, lub aby tekst zanikał), użyj maskowania CSS z gradientem liniowym. To podejście jest lepsze niż użycie półprzezroczystej nakładki, ponieważ faktycznie powoduje zanikanie samej treści, dzięki czemu tło jest widoczne w naturalny sposób, nie zakłócając zaznaczania tekstu ani zdarzeń wskaźnika.

Implementacja

Aby zastosować miękkie zanikanie krawędzi:

Zanikanie dolnej krawędzi kontenera

Jest to przydatne, gdy chcesz wskazać, że w obszarze przewijania znajduje się więcej treści.

.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%);
}

Zanikanie górnej i dolnej krawędzi

Możesz użyć pojedynczego gradientu z wieloma punktami przejścia kolorów, aby rozmyć obie krawędzie.

.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%);
}

Strategie zastępcze

Jeśli przeglądarka nie obsługuje mask-image ani wersji z prefiksem:

  • Treści nie będą zanikać i będą wyświetlane z ostrymi krawędziami.
  • Upewnij się, że interfejs nadal działa, a treści są czytelne bez efektu zanikania (progresywne ulepszanie).
  • Możesz użyć półprzezroczystej nakładki jako rozwiązania zastępczego, ale pamiętaj, że wymaga to znajomości koloru tła i może zakłócać zaznaczanie tekstu, chyba że użyjesz 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 */
  }
}