Подтвердить что ты не робот

Градиент прозрачности CSS3?

Я хочу создать эффект , как этот, но мой сайт имеет динамический background-color. Обратите внимание, что в этом примере используется белый наложение, которое не работает с разными фонами.

p {
    width: 300px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    position: relative;
}
p:after {
    content: "";
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

То, что я надеялся сделать, это настроить градиент непрозрачности CSS. Этот вид работы, но код слишком грязный. Глядя на этот второй пример, я мог бы реализовать его в jQuery, но есть ли способ сделать это целиком в CSS?

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете сделать это в CSS, но в браузерах не так много поддержки, кроме современных версий Chrome, Safari и Opera. В настоящее время Firefox поддерживает только маски SVG. Для получения дополнительной информации см. Caniuse.

CSS:

p  {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

Трюк заключается в том, чтобы указать маску, которая сама по себе является градиентом, который заканчивается как невидимый (через альфа-значение)

См. демонстрацию с солидным фоном, но вы можете изменить ее на все, что хотите.

DEMO

Обратите внимание также, что все обычные свойства изображения доступны для mask-image

p  {
  color: red;
  font-size: 30px;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-size: 100% 50%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left top, left bottom;
  }

div {
    background-color: lightblue;
}
<div><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div>

Ответ 2

Я думаю, что "грязный" второй метод, который связан с другим вопросом здесь, может быть единственным чистым решением CSS.

Если вы думаете об использовании JavaScript, это было моим решением проблемы:

demo: использование элемента canvas для увядания текста с анимированным фоном

Идея заключается в том, что ваш элемент с текстом и элементом canvasодин над другим. Вы сохраняете текст в своем элементе (в чтобы разрешить выбор текста, что невозможно при использовании canvasтекст), но сделайте его полностью прозрачным (с rgba(0,0,0,0), в чтобы текст был видимым в IE8 и старше - это потому, что вы не имеют поддержки RGBa и поддержки canvas в IE8 и старше).

Затем вы читаете текст внутри своего элемента и записываете его на холст с теми же свойствами шрифта, чтобы каждая буква, которую вы пишете на холст над соответствующей буквой в элементе с текстом.

Элемент canvas не поддерживает многострочный текст, поэтому вы будете иметь разбивать текст на слова, а затем добавлять слова на тестовую строку которые вы затем измеряете. Если ширина, занимаемая тестовой линией, больше чем максимальная разрешенная ширина, которую вы можете иметь для линии (вы получаете это максимально допустимая ширина, считывая вычисленную ширину элемента с текстом), то вы пишете его на холсте без последнего слова добавлено, вы reset тестовая строка, чтобы быть этим последним словом, и увеличиваете координата y, в которой для записи следующей строки на одну высоту строки (который вы также получаете из вычисленных стилей вашего элемента с помощью текст). С каждой строкой, которую вы пишете, вы также уменьшаете непрозрачность текст с соответствующим шагом (этот шаг будет обратно пропорционально среднему числу символов в строке).

В этом случае вы не можете легко сделать это, чтобы оправдать текст. Может быть но это немного усложняется, что означает, что у вас будет для вычисления того, насколько широким должен быть каждый шаг, и написать текстовое слово вместо строки за строкой.

Кроме того, имейте в виду, что если ваш текстовый контейнер меняет ширину, так как вы измените размер окна, тогда вам придется очистить холст и перерисовать текст на нем при каждом изменении размера.

ОК, код:

HTML

<article>
  <h1>Interacting Spiral Galaxies NGC 2207/ IC 2163</h1>
  <em class='timestamp'>February 4, 2004 09:00 AM</em>
  <section class='article-content' id='art-cntnt'>
    <canvas id='c' class='c'></canvas>In the direction of <!--and so on-->  
  </section>
</article>

CSS

html {
  background: url(moving.jpg) 0 0;
  background-size: 200%;
  font: 100%/1.3 Verdana, sans-serif;
  animation: ani 4s infinite linear;
}
article {
  width: 50em; /* tweak this ;) */
  padding: .5em;
  margin: 0 auto;
}
.article-content {
  position: relative;
  color: rgba(0,0,0,0);
  /* add slash at the end to check they superimpose *
  color: rgba(255,0,0,.5);/**/
}
.c {
  position: absolute;
  z-index: -1;
  top: 0; left: 0;
}
@keyframes ani { to { background-position: 100% 0; } }

JavaScript

var wrapText = function(ctxt, s, x, y, maxWidth, lineHeight) {
  var words = s.split(' '), line = '', 
      testLine, metrics, testWidth, alpha = 1, 
      step = .8*maxWidth/ctxt.measureText(s).width;

  for(var n = 0; n < words.length; n++) {
    testLine = line + words[n] + ' ';
    metrics = ctxt.measureText(testLine);
    testWidth = metrics.width;
    if(testWidth > maxWidth) {
      ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
      alpha  -= step;
      ctxt.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    }
    else line = testLine;
  }
  ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
  alpha  -= step;
  ctxt.fillText(line, x, y);
  return y + lineHeight;
}

window.onload = function() {
  var c = document.getElementById('c'), 
      ac = document.getElementById('art-cntnt'), 
      /* use currentStyle for IE9 */
      styles = window.getComputedStyle(ac),
      ctxt = c.getContext('2d'), 
      w = parseInt(styles.width.split('px')[0], 10),
      h = parseInt(styles.height.split('px')[0], 10),
      maxWidth = w, 
      lineHeight = parseInt(styles.lineHeight.split('px')[0], 10), 
      x = 0, 
      y = parseInt(styles.fontSize.split('px')[0], 10), 
      text = ac.innerHTML.split('</canvas>')[1];

  c.width = w;
  c.height = h;
  ctxt.font = '1em Verdana, sans-serif';
  wrapText(ctxt, text, x, y, maxWidth, lineHeight);
};