Как сделать так, чтобы фон у символов текста был размыт, но сами буквы четко отображались?

Question

[Oleg Front]

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



Как это сделать?

Answer 1

[Moon Presence]

Как вариант:

Использовать для достижения цели, эти свойства:

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

И через background задать размытый фон для текста. Например можно попробовать градиентами.

Для проверки поддержки желательно использовать @supports:

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .element {
    background: (здесь изображение или градиент);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

Comments

[Oleg Front]

да, что-то вроде этого я находил уже, вот пример https://ru.stackoverflow.com/questions/784209/%D0%...
но фон, я пытался сделать через фотошоп просто белый полупрозрачный квадрат и размыть его, но он не воспринимает это, как размытый фон в итоге, как вариант можно попробовать подобрать какую-то подходящую картинку и её размыть, ну или градиентами, этого я не пробовал

Answer 2

[strelok011]

фон абсолютно спозиционировать внутри дополнительного контейнера за текстом. и на этот контейнер применять blur
У родителя - позишн релатив

Comments

[strelok011]

либо копать в сторону эффектов для svg, легко гуглится

[Oleg Front]

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

[strelok011]

а тексту фон в соседнем контейнере не помешает.
а про svg - ну вот к примеру
https://www.sitepoint.com/design-tricks-with-svg-f...

[strelok011]

вот еще https://stackoverflow.com/questions/27583937/how-c..., с примером спозиционированного фона...
гуглится по фразе "svg filter blur background" :)

Answer 3

[McBernar]

Если коротко, то css маски и blur filter.