Как красиво скрыть текст под плавным фоном в виде градиента?

Question

Подскажите как правильно реализовать скрытые текста под фоном, чтобы было видно что ниже или выше есть текст с плавным градиентом

div {
  width: 200px;
  height: 120px;
  overflow: auto;
  padding: 8px;
  position: relative;
  border: 1px solid #cfcfcf;
}
div:before {
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  pointer-events: none;
  top: 0;
  background: linear-gradient(#fff, transparent);
}
div:after {
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  background: linear-gradient(transparent, #fff);
}

<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

Answer 1

* {
  margin: 0;
}

div {
  border: 1px solid #ccc;
  display: flex;
  height: 120px;
  overflow: hidden;
  position: relative;
  width: 200px;
}

div::before,
div::after {
  background: linear-gradient(#fff, transparent);
  content: '';
  height: 20px;
  position: absolute;
  pointer-events: none;
  width: 100%;
  z-index: 2;
}

div::before {
  background: linear-gradient(transparent, #fff);
  bottom: 0;
}

p {
  overflow-y: auto;
  padding: 8px;
}

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>

БЛОГ НА HUSL

Как красиво скрыть текст под плавным фоном в виде градиента?

Ответы (1 шт):