Как сверстать текст с частичной прозрачностью?

Question

[finchzet]

Подтолкните на идею, как можно сверстать такой текст прозрачный, но одновременно белый:)

P.S. Изображение будет реагировать на движение мыши и изменять свою позицию, соответственно, текст так же должен подстраиваться под это

Comments

[Rustam Bainazarov]

SVG-картинкой или двумя текстовыми блоками поверх друг друга на absolute и через маску обрезать верхний блок. Либо же градиент на текст в качестве заливки + text-stroke.

[Alex]

Рустам Байназаров, Почему это не в ответах?

[finchzet]

Рустам Байназаров, обновил вопрос

[Rustam Bainazarov]

Alex, да я же просто для веселья это пишу.

finchzet,

А дальше уже только JS и подстройка градиента с его помощью на основе позиции курсора и картинки позади, если есть такая задача. К CSS это не имеет отношения.

Тот же механизм применим и к варианту с маской (два блока на absolute). Наверное, так будет даже проще, ибо позицию маски полегче интерпретировать.

Update.
Там даже проще. Блок с прозрачным текстом, блок с картинкой, блок с белым текстом. Вот в таком порядке. Без масок и градиента.

[Rustam Bainazarov]

finchzet, написал ответ. Наведите на картинку, чтобы посмотреть, как это работает при её перемещении.

Answer 1

[Rustam Bainazarov]

В данном случае так будет проще:



В целом, можно ещё сделать SVG-картинкой, либо же градиент на текст в качестве заливки + text-stroke:



Однако, в данном случае проще всего именно первый вариант из-за параллакса.

Comments

[finchzet]

Благодарю!