Можно ли сделать такую надпись в html без использования картинок?

Question

[Людмила]

Доброго дня!
Возник вопрос на который самостоятельно ответить не могу. А надо)
Вот прошу помощи у специалистов: возможно ли сделать такую надпись в html без использования картинок? Только посредством html, css, ну может быть js



Т.е. слово, внутри него какое-то наполнение. Даже не знаю как и рассказать правильно... Уж простите.

Может кто поймет и сможет поделиться? Буду очень благодарна.

Answer 1

[Максим Тимофеев]

Можно, используя svg и\или js
ссылки на тему:
tympanus.net/codrops/2013/12/02/techniques-for-cre...
https://habrahabr.ru/post/30565/
https://yandex.ua/search/?rdrnd=951098&win=200&tex...

Comments

[Людмила]

Спасибо за помощь!

Answer 2

[xtala zen]

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

Answer 3

[Иван]

Попробуйте использовать несколько слоёв с разным z-index, абсолютным позиционирование и прозрачностью у букв

Answer 4

[Максим]

Можно просто вырезать этот текст в любом редакторе изображений и сохранить , потом уже в Див фотом нужное изображение и поверх ваше изображение

Answer 5

[SergeProfessor]

Можно, это называется svg-маска. Долго над этим промучился, в итоге сделал кроссбраузерное решение (т.к. firefox просто svg-маски не любит). Можете посмотреть, как это реализовано у меня: https://live.sysoev.pw/wp/wowday