Как сделать исчезновение текста, то есть чтобы конец текста был более прозрачным

введите сюда описание изображения

Вот как добиться такого эффекта в html?


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

Автор решения: Евгений Ли

С помощью ":before" можно легко сделать этот эффект.

.description p {
  position: relative;
}
.description p:before {
  content: '';
  display: block;
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(255,255,255,0) 0, white 100%);
}
<div class="description">
  <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p>
  <p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</p>
  <p>Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
</div>

→ Ссылка