CSS: как затухать текст сверху и снизу?

Мне нужно, чтобы абзац исчезал как сверху, так и снизу. Но я могу исчезнуть только с любой из сторон.

HTML:

<p className="bottom-overflow-fade">
  {content}
</p>

CSS:

.bottom-overflow-fade {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.top-overflow-fade {
  mask-image: linear-gradient(to top, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
}

Текущий результат:

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

Проблема:

Если я добавлю оба этих имени класса в абзац, затухание не сработает. Если я использую любой из них, то затухание отлично работает как для верхней, так и для нижней части. Можно ли объединить оба этих свойства CSS в одно, чтобы работало как верхнее, так и нижнее затухание?

Примечание. Я не говорю ни о какой анимации.


html css linear-gradients css-mask
person Vinay Sharma    schedule 01.07.2020    source источник
comment
Как вы хотите, чтобы один абзац затухал сразу с 2-х сторон. Это не имеет смысла.   -  person Deitsch    schedule 01.07.2020
comment
Это делает в моем случае использования, когда пользователь прокручивает, я хочу исчезать с обеих сторон.   -  person Vinay Sharma    schedule 01.07.2020
comment
Можете ли вы показать, как он выглядит, когда он работает идеально, чтобы мы могли получить ссылку?   -  person Mina    schedule 01.07.2020
comment
Виноват. Я всегда думал, что вы имеете в виду плавную анимацию, а не цветовой градиент. Вау, надо было читать это внимательнее - извините   -  person Deitsch    schedule 01.07.2020
comment
@Mina Я добавил изображение для справки.   -  person Vinay Sharma    schedule 01.07.2020

Ответы (2)


arrow_upward
2
arrow_downward

Это связано с природой CSS. Если вы подадите две декларации для одного и того же имущества, только одна будет председательствовать! Вы можете создать один класс с другим линейным градиентом, который начинается с прозрачности, переходит в черный, а затем заканчивается прозрачным, например:

.top-bottom-overflow-fade {
  mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}

ИЗМЕНИТЬ

Вопрос, заданный в комментариях, спрашивает, какие значения передаются в функция линейного градиента:

  1. Первый аргумент — это необязательное значение, которое управляет направлением градиента. Это можно описать с помощью некоторых ключевых слов (например, to left top или to right) или с помощью угла поворота. В CSS единицы, используемые для выражения углов, могут быть в форма deg (градусы), turn, rad (радианы) или grad (градианы). Направление по умолчанию — сверху вниз, если оно не указано. Обратите внимание, что я не включил это, поэтому используется направление по умолчанию.
  2. Остальные аргументы представляют собой список цветов и необязательных значений, указывающих, где должен начинаться и заканчиваться цвет, которые называются ограничители цвета. Вы можете использовать столько цветовых остановок, сколько пожелаете. Чем больше цветовых остановок у вас есть, тем уже становится каждая «полоса» цвета. Список остановки цвета без каких-либо «подсказок» или начальной и конечной точек будет иметь плавный переход от одного цвета к другому, поскольку он будет применять точки начала и окончания цвета единообразно. Если вам нужен резкий переход от одного цвета к другому, вы должны установить конечный процент первого цвета на то же значение, что и начальный процент следующего цвета. Некоторые умные и артистичные люди создают потрясающие узоры с градиентами CSS, используя преимущества свойства background-image, позволяющего складывать несколько изображений (градиенты рассматриваются как фоновые изображения, а не как фоновые цвета)!
person jme11    schedule 01.07.2020
comment
Эй, @ jme11, это сработало как шарм. Не могли бы вы объяснить синтаксис для этого или поделиться соответствующим ресурсом? Например, если я продолжу добавлять новые свойства, что они будут означать? linear-gradient(a, b, c, d, e, ...); и так далее? Спасибо! :) - person Vinay Sharma; 01.07.2020
comment
@VinaySharma Если вы хотите получить представление о силе градиентов CSS (линейных и радиальных), обязательно ознакомьтесь с сообщением о градиентах CSS на CSS Tricks. css-tricks.com/css3-gradients - person jme11; 02.07.2020
comment
Я не мог понять ваш ответ, если я хочу затухать только левый и правый края. Я дважды прошел через ваш EDIT, но я все еще не понимаю, как аргументы, переданные в linear-gradient, могут указать, что контейнер должен исчезать только сверху и снизу, а остальное оставить как есть. Короче говоря, вы не указали никаких направлений вроде to-top и to-bottom, так как это работает на самом деле? ???? - person Vinay Sharma; 18.07.2020

arrow_upward
0
arrow_downward

Вот общее решение на случай, если вы хотите иметь верх, низ и их комбинацию.

Хитрость заключается в том, чтобы создать маску, используя 3 градиента, где по умолчанию все белого цвета (без прозрачности), а затем с помощью переменной CSS вы меняете белый цвет на прозрачный, чтобы создать эффект затухания.

.fade {
  -webkit-mask:
    linear-gradient(to top   ,#fff,var(--t,#fff)) top    / 100% 30%,
    linear-gradient(#fff,#fff)                    center / 100% 40%,
    linear-gradient(to bottom,#fff,var(--b,#fff)) bottom / 100% 30%;
  -webkit-mask-repeat:no-repeat;
  mask:
    linear-gradient(to top   ,#fff,var(--t,#fff)) top    / 100% 30%,
    linear-gradient(#fff,#fff)                    center / 100% 40%,
    linear-gradient(to bottom,#fff,var(--b,#fff)) bottom / 100% 30%;
  mask-repeat:no-repeat;
}

.top {
  --t:transparent;
}

.bottom {
  --b:transparent;
}

p {
 font-size:25px;
 max-width:180px;
 display:inline-block;
}
<p class="fade top">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade top bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

Чтобы понять загадку, вот тот же код, использующий фон:

.fade {
  background:
    linear-gradient(to top   ,red,var(--t,green))   top    / 100% 30%,
    linear-gradient(pink,pink)                      center / 100% 40%,
    linear-gradient(to bottom,blue,var(--b,purple)) bottom / 100% 30%;
  background-repeat:no-repeat;
}

.top {
  --t:transparent;
}

.bottom {
  --b:transparent;
}

p {
 font-size:25px;
 max-width:180px;
 display:inline-block;
}
<p class="fade top">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

<p class="fade top bottom">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod est quis nibh porta, ut vehicula magna imperdiet. Etiam euismod urna id venenatis pulvinar
</p>

person Temani Afif    schedule 01.07.2020