Как такое реализовать?

Question

[Александр Зелицкий]

Всем привет) недавно начал заниматься версткой, наткнулся на один интересный макет. Есть картинка пнг. И внутри неё на блоках текст. Но он сверстан, а не является частью изображения. Подскажите как такое можно сделать? И чтобы это корректно отображалось на мобильная версия. (Я не прошу написать мне код, а лишь подсказать в каком направлении двигаться. А то сейчас набежет куча умников и начнут строить из себя не пойми,что!)

Answer 1

[Odisseya]

Можно сделать трассировку в векторном редакторе и сохранять как SVG, где тексты останутся таковыми. Для адаптивности — пропишите для svg медиа-запросы и сместите текстовые блоки, чтобы все из них были в зоне видимости.

Answer 2

[approximate solution]

Есть картинка пнг. И внутри неё на блоках текст. Но он сверстан, а не является частью изображения.

Гриды вам в помощь, верстается сетка, в каждом блоке сетки - какой нибудь span в котором текст, и он уже будет двигаться по контейнеру, либо поворачиваться с помощью rotate.

Но вот с адаптивностью - нужно будет делать много брейкпоинтов, что бы всё это адаптивно смотрелось(сделать можно, но кастомной писанины будет много).

А так - руки бы там дизайнерам выкручивал бы.

Самый верный вариант - не верстать, а просто отдавать в браузер картинку которая будет менять плотность пикселей и размер для разных экранов. На мобилки - отдай такую, для ретина экранов - 2х, и тд.

Comments

[iBird Rose]

в принципе вся эта картинка в svg мало будет весить. все векторное вроде