Затухание контента у мягких краев

Функции для сайтов: Маски

Обзор

Чтобы применить градиент прозрачности к краям контейнера (например, чтобы показать, что доступно больше контента, или чтобы текст постепенно исчезал), используйте маскирование 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 */
  }
}