Как сделать исчезновение текста, то есть чтобы конец текста был более прозрачным
Ответы (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>
