1

Как сделать такой текст? введите сюда описание изображения

Есть вариант делать это все тэгом , но я думаю это не лучшее решение...

3
  • какой такой? не понятно что именно хотите 19 окт 2021 в 10:18
  • как заблюрить в конце текст?
    – Purple Pig
    19 окт 2021 в 10:20
  • на картинке он не заблюрен. каждое новое предложение с меньшей прозрачностью, можно на css, но нужно каждое предложение заворачивать в элемент 19 окт 2021 в 10:24

2 ответа 2

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>

3
  • Я просил без spanов
    – Purple Pig
    19 окт 2021 в 10:30
  • Есть способ без спанов, может box-shadow?
    – Purple Pig
    19 окт 2021 в 10:31
  • как на картинке только блоками возможно, там не градиент. 19 окт 2021 в 11:40
2

#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
  • Респект! Спасибо!
    – Purple Pig
    19 окт 2021 в 10:54
  • 2
    Чуть правильнее будет так - -webkit-mask-image: linear-gradient(to right bottom, white 1em, transparent 85%); :)
    – UModeL
    19 окт 2021 в 10:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.