Как верстаются такие линии???

Question

[it_pear_yurec]

Можно наложить background-ом и потом абсолютное позиционирование, либо есть другой быстрый и правильный метод ?

Comments

[Нурлан]

А я смотрю вы фанат линий:

[Дмитрий Коробейников]

Они должны быть адаптивными или фиксированными?

[it_pear_yurec]

Дмитрий Коробейников, адаптивными, суть в том что на больших экранах они будут, а на маленьких я линии уберу и выстрою блоки в один ряд столбиком

[it_pear_yurec]

Нурлан, да, есть такое) просто я не находил быстрых решений, часто это свг и абсолютное позиционировние в подобных случаях

[Александр null]

canvas в помощь

Answer 1

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

svg + js

Comments

[it_pear_yurec]

а js какую роль играет ?)

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

Думаю, что если генерить svg через js, то получится красивее и адаптивнее. Конечно js не обязателен, но с ним "красивше" будет

Answer 2

[Конан Варвар]

Вы знаете, я вообще противник гнать на дизайнеров, но блин, неужели человек вообще дубовый, чтобы рисовать такую ахинею. Я бы за такое наказывал, сильно. Сделайте картинкой весь блок и не парьтесь :)

Comments

[Александр Аксентьев]

Давайте вообще таблицами верстать и ничего нового не придумывать, это же сложно. ¯\_(ツ)_/¯

[it_pear_yurec]

Александр Аксентьев, согласен x-D

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

Вы не правы. Все дело в бюджете, если бюджет позволяет делать сложные вещи, то почему нет? Можно написать плагин на js (jquery), который будет рассчитывать размеры, кол-во блоков в ширину и строить svg path и цеплять на него блоки. При этом это можно будет повторно использовать. Добавим анимации и красота. Но если бюджет маленький - тогда другой разговор и тогда картинкой делаем не задумываясь.
Но как по мне такие вещи делают жизнь верстальщика интереснее. Терпеть не могу верстать то что я уже делал. А тут есть возможность размять мозг.

[Одиночка Айс]

Александр Аксентьев, Давайте все таки думать о конечных пользователях/посетителях сайтов, а не рисовать какую-то хню, которая никому не в*ралась.

[Kovalsky]

Одиночка Айс, не-не-не, мне она нравится, рисуйте.

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

Одиночка Айс, а чем эта линия мешает конечникам? По моему классно. Сложно, но классно. А можно еще и слайдером сделать. Если классно реализовать будет изюминкой сайта.

[Одиночка Айс]

Максим Тимофеев, тем что канвас будет тормозить у 90% пользователей

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

Одиночка Айс,

тем что канвас будет тормозить у 90% пользователей

глупости, откуда цифра?
Да и откуда взялся canvas?

[Одиночка Айс]

Максим Тимофеев, а вы что, свг собрались анимировать?) А про цифры простая статистика общения с конечными клиентами.

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

Одиночка Айс,

а вы что, свг собрались анимировать?

про анимацию в задаче ни слова, это я добавил, что можно красоты добавить, но в чем проблема анимировать svg? SMIL конечно имеет нюансы с кроссбраузерностью, но css анимация отлично работает с svg. Js анимация - тоже. На крайний случай есть 100500 библиотек. Хотя тут на мой взгляд css и keyframes более чем достаточно.

А про цифры простая статистика общения с конечными клиентами.

На заборе написано? Хотите покажу канвас, который не тормозит? Вот:
<canvas></canvas>
А дальше вопрос кривых рук

Answer 3

[Дмитрий]

https://joshondesign.com/p/books/canvasdeepdive/to...