Есть вариант делать это все тэгом , но я думаю это не лучшее решение...
-
какой такой? не понятно что именно хотите– Artem Gorlachev19 окт 2021 в 10:18
-
как заблюрить в конце текст?– Purple Pig19 окт 2021 в 10:20
-
на картинке он не заблюрен. каждое новое предложение с меньшей прозрачностью, можно на css, но нужно каждое предложение заворачивать в элемент– Artem Gorlachev19 окт 2021 в 10:24
Добавить комментарий
|
2 ответа
p span:nth-child(2) { opacity: .8 }
p span:nth-child(3) { opacity: .6 }
p span:nth-child(4) { opacity: .4 }
p span:nth-child(5) { opacity: .2 }
p span:nth-child(n+6) { display: none }
<p>
<span>Как сделать текст сбоку картинки через CSS?</span>
<span>Как сделать такой строчно-блочный список с помощью css?</span>
<span>Сделать текст бегущей строкой при наведении</span>
<span>css: взаимное расположение блоков</span>
<span>Как сделать слайдер с помощью перспективы css/js?</span>
<span>Как сделать такой внешний border-radius?</span>
<span>Как сделать такой элемент как в макете</span>
<span>Как сделать такой ховер?</span>
</p>
#app {
border: 1px solid;
width: 300px;
}
span {
display: block;
-webkit-mask-image: linear-gradient(white, transparent);
}
<div id="app">
<span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus est natus debitis suscipit minus unde totam optio, nostrum tempore iusto voluptate ullam esse rem fuga cumque, saepe minima culpa perspiciatis aut cum ducimus, sit maiores laboriosam vel! Fugiat vitae rem, dignissimos eaque accusamus vel minima consequatur, doloremque, fugit officiis ipsam!</span>
</div>
-
-
2Чуть правильнее будет так -
-webkit-mask-image: linear-gradient(to right bottom, white 1em, transparent 85%);
:)– UModeL19 окт 2021 в 10:58