Как такое верстают?

Question

[angry_yum]

Здравствуйте, подскажите как верстают такое адаптивно?
Вставляют цельной картинкой или как-то по умному верстают?

Answer 1

[Виорел]

Примерно что то в этом роде я верстал, как идея можно посмотреть ссылка на сайт

Comments

[ihoooly]

есть вариант когда оно разваливается

Answer 2

[ValeraValera]

Вот интересно, как обоснует наличие этих линий дизайнер ? Сколько потеряет бизнес, если эти кружочки будут просто на голубом фоне ? Тем более это не связанные элементы, о отельные услуги и врайпером для них служит голобой фон. Дизайнер должен уметь верстать и точка, чтобы такую дичь не творить

Comments

[NikitaKA]

Если развить вашу логику, то весь дизайн должен быть выполнен из прямоугольников и кругов.

Нет практически ничего, что нельзя было бы реализовать из того, что "приходит" от дизайнера. Любой эффект можно имплементировать одним из множества способов: CSS, Javascript, Canvas, WebGL и т.д.

[snap44]

NikitaKA, остается только понять стоит ли вся эта наркомания денег, потраченных на её реализацию.

[Виолетта Морозова]

NikitaKA, ну он имел ввиду не то, что это супер сложно или невозможно реализовать, а то, что пунктиры как дизайнерская задумка не имеет никакой смысловой нагрузки, т.е. то зачем этот пунктир обычно рисуют. Все он грамотно подумал. И даже то, что диз должен уметь верстать. Если бы он знал, что это достаточно трудоемкая разработка и что она несет за собой несоразмерные нагрузки, то не стал бы тратить время разработчиков и деньги заказчиков на бессмысленные элементы "дэкора".

Answer 3

[xmoonlight]

Пунктир - либо статичный SVG, либо рисуется с помощью JS при загрузке страницы.
Круги - это DIV.

Я бы делал пунктир с помощью JS+SVG динамически и только там, где он нужен.
Где не нужен (на мобилках) - не рисуем!

Comments

[AngReload]

Где не нужен (на мобилках) - не рисуем!

Тогда зачем JS? Статичный SVG (или вообще PNG) для широких экранов, когда влезает четыре столбца кружков с фотками. Иначе, как вы говорите — не рисуем.

[xmoonlight]

AngReload, ну я немного не точно выразился: я бы рисовал пунктир везде, т.к. юзал бы JS.
А так - да. Если не рисуем, то можно и просто SVG(PNG).

Answer 4

[Дмитрий]

круги с фотками скорее всего div
как сделан пунктир с ходу не скажу
если знаете где этот сайт откройте средства разработчика да подсмотрите

Comments

[Олег]

Думаю, что ТС находится в фотошопе с "подарком для размышления" от дизайнера)))

[xmoonlight]

Олег, я даже и не сомневаюсь, что это именно так)

[Дмитрий]

xmoonlight, Олег,
нда дизайнеры это еще те люди
мне недавно для верстки прислали psd шириной 2560 пикселей
пришлось капитально помучится чтобы нормально смотрелось и при меньших разрешениях

[xmoonlight]

Дмитрий, ну надо по рукам дизайнерам за такое сразу!
Есть стандарты - по ним пусть и работают.

[Виталий Першин]

Дмитрий, Не знаю какое именно вам псд прислали, но 2560 пикселей уже вошли в обиход... Вы бы лучше с заказчиком уточнили под какие экраны вам нужно верстать, а то в данном контексте ваше недовольство не обосновано.

[Виталий Першин]

xmoonlight, Вы ничего не упускаете? Это и есть один из стандартов..

[Дмитрий]

Виталий, естественно все уточнено 1024 и шире))

[Виолетта Морозова]

Дмитрий, может 2560 - это один из следующих брейкпоинтов после 1024 ?
Вообще должно было быть несколько макетов разной ширины. В зависимости от обусловленных контрольных точек (breakpoint). И заметьте, Если вам дали макет 2560, значит все что в нем нарисовано должно быть показано при разрешениях ОТ 2560. То, что ДО 2559 включительно должно быть в другом макете. Например 1980.

[Дмитрий]

о разных макетах и речи не шло
дизайнеру в принципе фиолетово как будет реализовываться им нарисованное

[Rustam Bainazarov]

Дмитрий, это был не дизайнер, а говно. Дизайнер должен учитывать не только разрешение 2560, но и все другие разрешения.

Именно дизайнер должен продумать то, как должен выглядеть макет на всём диапазоне разрешений, а не только на одном из.

P. S. Если меня читает дизайнер, коим я тоже являюсь, пожалуйста, не делайте так как никогда, не ленитесь. И обязательно изучайте вёрстку :))

Answer 5

[Cabac_B]

Здравствуйте, подскажите как верстают такое адаптивно?

для начала вопрос к дизайнеру - как он представляет себе варианты адаптации изображения.
тут не очевидно.

верстальщик не должен ничего придумывать.

ну а как сделать - уже написали.

Comments

[Александр Филиппенко]

Я заметил что если работаешь с по настоящему крутыми дизайнерами, то таких вопросов не возникает, всё и так очевидно. А вот когда всё отрисовано, но не понятно как это верстать, то это как раз признак низкой квалификации дизайнера.

Answer 6

[synapse_people]

Легко) Делаем таблицу, фоткаем каждую линию и вставляем в td кучу img
Все просто!!!!))

Comments

[Mike]

- А давай подарим ему зажигалку?
- Он не курит...
- А давай тогда подарим ему штаны такие зеленые, куртку из обезьяны и...
- И ты не кури...