Линейный градиент, который делает текст "исчезающим"

Question

Мне нужна помощь. Есть несколько контейнеров с текстом внутри. Очевидно, что текста очень много, поэтому нужно использовать прокрутку. Но я не хочу, чтобы текст выглядел как обрезанный, я хочу «размыть» дно одного контейнера.

Вот результаты: https://jsfiddle.net/rsze93wk/3/

Ну, это выглядит ... довольно дерьмово, на мой взгляд. Дно контейнера должно быть почти невидимым, но я могу четко его прочитать. Я использовал :after и display: block, чтобы создать этот эффект, поэтому я не могу выделить текст под этим псевдоэлементом.

Также существует проблема, градиент остается в одном месте при прокрутке вниз , Вы можете помочь мне решить это? Кроме того, может быть, у вас есть идеи, как сделать этот эффект намного лучше?

Answer 1

^{Обновление : первый фрагмент, кажется, глючит на Chrome, но отлично работает на Firefox}

Вы можете попытаться раскрасить текст, используя градиент как ниже:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
  background: linear-gradient(#000 calc(100% - 50px),white);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

Еще одна альтернатива с использованием липкой:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
}
.main::after {
   content:"";
   display:block;
   height:200px;
   margin-top:-200px;
   position:sticky;
   bottom:0;
  background: linear-gradient(transparent calc(100% - 50px),white);
  pointer-events:none;
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

А если вы хотите настоящий эффект размытия, используйте фон-фильтр:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0;
  height: 100vh;
}

.container {
  padding: 20px;
  border: 1px solid black;
}

.main:not(:first-child) {
  margin-top: 20px;
}

.main {
  width: 200px;
  height: 200px;
  box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.75);
  overflow: auto;
  text-align: center;
}
.main::after {
   content:"";
   display:block;
   height:20px;
   margin-top:20px;
   position:sticky;
   bottom:0;
  pointer-events:none;
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

<div class="container">
<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>

</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex massa, vestibulum non quam quis, commodo fermentum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in erat libero. Phasellus ipsum odio, rutrum porttitor velit a, venenatis cursus nisi. Donec venenatis, felis at luctus ullamcorper, leo nibh scelerisque orci, et pellentesque quam libero vel enim. Pellentesque a mauris nibh. Suspendisse eu laoreet nisi. Pellentesque bibendum ullamcorper iaculis. Nulla tortor odio, vehicula ac diam non, aliquet tristique sem.</p>
</div>
</div>

Answer 2

Я хочу «размыть» дно одного контейнера.

Размытие - это CSS фильтр (filter: blur(1)), и вы не можете использовать его здесь с after:: псевдоэлемент, поскольку содержимое этого элемента пустое.

Я использовал: after и display: block, чтобы создать этот эффект, поэтому я не могу выделить текст под этим псевдоэлементом.

Это хорошее и распространенное решение. Чтобы сделать текст под щелчком after:: кликабельным, вы можете добавить pointer-events: none; к after::.

Также существует проблема, градиент остается в одном месте при прокрутке вниз.

after:: должен располагаться на .main, а в .main у вас должен быть другой контейнер со свитком.