Как называется такой дизайн? Как научиться правильно верстать такие макеты?
Привет! На работе дали сложный макет, с кривыми линиями по всей длине страницы, типа линия начинается на одной точке и заканчивается в конце страницы. А на протяжении всей кривой расположены кнопки, тексты, и тд.
Макет показать не могу, но вот картинка, на которой дизайн примерно похож.
Вопрос - как правильно верстать такие страницы? Есть ли для этого какие то методы? Или все делают нестандартными способами?
Если верстать тяжело, можете попробовать плагин, по типу: LeaderLine
Но вообще разрезать на куски ваш макет и поставлять SVG построчно. Для меня всё выглядит как пара строк, разбитых по три столбца и псевдоэлементами соединения
если задача сверстать 1:1
0. этот скрин кидаете бэкграундом (размер точно в пикселях) на body, выравниваете его как вам надо по краям
1. Вытаскиваете из рисунка все тексты (заголовки и блоки) и верстаете страницу дивами, вкладывая в них H2(numbers), H3(titles) и P(параграфы) == размерами шрифта и отступами регулируйте максимальное совпадение (перекрытие) бакгроунда вашими блоками с текстом(заливка у блоков прозрачная, чтобы видеть нижний скрин).
2. Отделяете на скрине графику от текстов, тексты удаляете (в фотошопе например), и кладёте получившееся также бэкграундом вместо первоначального скрина
3. передайте текстам цвета
Готово
если стоит задача адаптивности, то бэкграунд нарезайте на части, (целыми кусками, не перерезая линии) и кидайте их бэкграундами в дивы
лучше освоить любую векторную прогу и переводить растровые рисунки в вектор, далее в SVG, с ним вам будет удобнее работать
Макет на картинке прост до безобразия. Тут вообще всё линейно, нет никаких кривых линий. Тупо режется на блоки и укладывается хоть в grid, хоть во flex, хоть по старинке в table.
Hulk a, как он еще мог конкретнее ответить? Или ему полностью решение дать? Какая в этом вопросе должна быть конкретика? Берешь режешь на блоки и верстаешь - это элементарщина.
