1

Хочу добавить что-то по типу "брызг" на текст. К примеру, белый текст и на нём красные брызги, но не знаю как это написать. Максимум, что выходило - градиент.

Прикрепляю код просто белого текста с белой тенью:

p {
  background: linear-gradient(35deg, #ffffff, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 9px #ffffff;
}

1 ответ 1

2

На чистом CSS, без использования изображений в качестве фона для символов, такое сделать затруднительно. А вот SVG довольно неплохо справляется с задачей.

Запустите пример, подвигайте ползунки. Как только добьётесь нужного результата, скопируйте код фильтра из нижнего поля.

.splash {
  font: bold 100px "Arial Black";
  /* background: linear-gradient(35deg, #f00, #f00); */
  filter: url(#splash) drop-shadow(0 0 1px #f00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #fff;
  /* -webkit-text-stroke: 1px #f00; */
  /* text-shadow: 0 0 1px #f00; */
}
<div class="splash">SPLASH</div>

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="splash">
    <feTurbulence type="turbulence" baseFrequency="0.25" numOctaves="13" result="turbulence"/>
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="26" xChannelSelector="R" yChannelSelector="G"/>
  </filter>
</svg>

<!-- Only for demo --> <br>baseFrequency <input type="range" min="0.01" max="1.0" step="0.01" value="0.25" oninput="document.getElementById('splash').children[0].setAttribute('baseFrequency', this.value);document.getElementById('code').value = document.querySelector('svg').outerHTML;"> scale <input type="range" min="1" max="100" step="1" value="26" oninput="document.getElementById('splash').children[1].setAttribute('scale', this.value);document.getElementById('code').value = document.querySelector('svg').outerHTML;"> Код: <input id="code" onfocus="this.select()">

Возможно, что какие-нибудь из закомментированных CSS-свойств (или их комбинации) подойдут лучше.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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