Как сделать вертикальную шкалу с этапами (развития, строительства или другого) на HTML?
Добрый вечер. Появилась задача - сделать вертикальную шкалу с этапами строительства на HTML. Прототип:
Вот так должна примерно выглядеть шкала на живом сайте В ШАХМАТНОМ ПОРЯДКЕ:
Что посоветуете? Может есть уже готовое решение?
Нарисовать этот выпендр в SVG и вставить его инлайн.
Потому что в HTML придется много думать. например, о том, как это будет выглядеть у пользователя на мобиле с текстами дикого размера, напрочь не влезающими в отведенное им дизайнером место.
На флексах вообще без проблем. Верстаете блоки фиксированного размера. Текст внутри блоков просто центрируете все так же флексами без отступов сверху и снизу, так будет свободное пространство сверху и снизу для текстов разной длины. Ну и картинку по центру. Просто соблюдать симетрию относительно картинки. Для декстопа этого будет достаточно. При переходе на планшет, там эта картинку по сути и не нужна уже (чисто декор и никакой информации не несет.) и там вообще руки полностью развязаны делать как понравится..
Потому что в HTML придется много думать. например, о том, как это будет выглядеть у пользователя на мобиле с текстами дикого размера, напрочь не влезающими в отведенное им дизайнером место.
а что там думать то? Деградация стилей. Убираем лишний декор и выстраиваем в ряд, направление иконок слева или с права, без проблем контролируется флексами. Все предельно просто.
Виталий, встречный вопрос: а у вас есть знакомые со зрением +8?
У которых настройка шрифтов в браузере почему-то разрывает всякие крутые дизайны в клочья?
встречный вопрос: а у вас есть знакомые со зрением +8?
У которых настройка шрифтов в браузере почему-то разрывает всякие крутые дизайны в клочья?
Я вообще не понимаю о чем вы говорите и где тут крутой дизайн. Притенения к размеру шрифта это дичь какая-то. Вы что не можете адаптировать блок и текст как надо без знакомых? Это настолько элементарная задача с кучей вариантов решения, что просто смешно слушать о каких-то проблемах. Лично я без проблем сделаю этот блок полностью отзывчивым ко всем экранам и размерам и динамическому тексту, но в двух словах я этого не напишу и делать за кого-то не буду, а поскольку такой вопрос задали я предложил простое решение. А то что вы шрифт не можете подогнать и вам иконка мешает, ну это ваши проблемы.
