Прозрачный текст + text shadow, как сделать так, чтобы тень была только снаружи букв?

Question

[Максим]

Здравствуйте

Нужно сделать текст, который был бы полностью прозрачен, но имел text-shadow.
Сейчас, например, используя -webkit-text-fill-color (или color: transparent) + text shadow у меня на заднем фоне видна тень, хотя она нужна только снаружи текста

Например, если у текста задан цвет, то тень выглядит как надо:

Но стоит сделать текст прозрачным, то идея спотыкается о тот факт, что тень находится позади текста:


Ссылка на песочницу:
jsfiddle.net/mnBs5/110

Ещё один важный момент - использовать картинки и SVG не представляется возможным, так как текст должен быть редактируемым на стороне клиента

Answer 1

[Анатолий]

Если бэкграунд не изменяется, то можно просто указать цвет бэкграунда.

Comments

[Максим]

Проблема как раз именно в этом. Эта надпись должна накладываться поверх выбираемого юзером бэкраунда. То есть на клиенте меняется и бэкграунд и текст. Причём можно было бы захардкодить, задав разный цвет текста, соответствующий для каждого бэкграунда, но и тут загвоздка - перечень бэкграундов, выдаваемых на выбор юзеру задаётся уже в админке. Поэтому решил сделать прозрачность текста, если это вообще возможно

Answer 2

[ElijahTr]

Два варианта:
https://codepen.io/elijah_tr/pen/wPbPaX
Второй в Edge не будет работать.

Answer 3

[Moskus]

Можно использовать неофициальные свойства CSS и наложить поверх вашего текста еще один экземпляр того же текста, но со стилем, включающим что-то такое (url и положение background-а должны быть такими же, как у блока, в котором текст находится):

background: url(https://c1.staticflickr.com/5/4553/38868783061_1d7f338116_c.jpg) no-repeat;     
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

Comments

[Максим]

Проблема как раз именно в этом. Эта надпись должна накладываться поверх выбираемого юзером бэкраунда. То есть на клиенте меняется и бэкграунд и текст. Причём можно было бы захардкодить, задав разный цвет текста (или background-clip), соответствующий для каждого бэкграунда, но и тут загвоздка - перечень бэкграундов, выдаваемых на выбор юзеру задаётся уже в админке. Поэтому решил сделать прозрачность текста, если это вообще возможно

[Moskus]

Максим, я умею читать, и уже прочитал, что вы написали.
То, что вы хотите, невозможно сделать без дополнительных элементов. Вариант, который предлагаю я, делается средствами HTML+CSS, без SVG.
Я не хочу тратить время на написание полного кода, потому что это нужно вам, а не мне. Постарайтесь внимательно разобраться в том, что я описываю.
Создайте структуру типа такой:

<div class="container">
<span class="shadow">Text</span>
<span class="background">Text</span>
<div>

Задайте стили так, чтобы .background точно находился поверх .shadow, совпадал с ним.
Назначьте .shadow ту тень, которую хотите получить.
Назначьте .background свойства background-clip, text-fill-color.
А теперь создайте один стиль для .container и .background, в котором будет задаваться "выбираемый пользователем фон". Если вы можете дать пользователю менять фон одного элемента, точно также можете сделать так, что будет меняться фон сразу двух.
Да, я признаю, что это идиотское решение, но оно не более идиотское, чем дизайнерская выдумка, которую вы пытаетесь реализовать.