Кто сталкивался с версткой такого типа макета?

Question

[WebforSelf]

Есть такой блок сайта, скажите как его отверстать полностью на css? допустим что блок с видео и изображения вокруг него животных можно поставить с помощью z-index и псевдоэлементов before after.

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

Comments

[Алексей Ярков]

вся эта штука должна быть адаптивной

Забудьте

[Мария Коробкоголовых]

дизайнер просто демон

[Otrivin]

Ну в принципе на transform scale можно сделать адаптив :)

[WebforSelf]

Otrivin, пример есть?

[Rustam Bainazarov]

WebforSelf, лютый JS вам в помощь. Полоску на CSS универсальную вы не сделаете. И с помощью просто SVG тоже.

А так — посылайте нафиг дизайнера, либо просите показать его, во-первых, как это должно быть адаптивно в его понимании.

А так — типичный пример родительского блока с абсолютно позиционировании элементами и не очень хорошим дизайном.

[Сергей delphinpro]

Алексей Ярков,

Забудьте

Почему это вдруг? Довольно просто адаптируется, постепенно выпрямляясь в вертикальную прямую.

[Сергей delphinpro]

Рустам Байназаров,

А так — посылайте нафиг дизайнера

Ну зря вы так.
Неплохой кейс, чтобы красиво сделать и положить себе в портфолио.

[Rustam Bainazarov]

Сергей delphinpro, с этой точки зрения — согласен.

Answer 1

[Ivan Bogachev]

Забудьте... дизайнер просто демон... посылайте нафиг дизайнера...

О да, люблю эти комментарии. Набросал тут небольшой прототип:


В браузерах особо не проверял, только Chrome и FF, но вроде в современных должно работать.

Comments

[profesor08]

Забавная либа.

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

SVG рисуется с помощью babel.js? Поясните, плиз

[Ivan Bogachev]

Одиночка Айс, Скрипт во вкладке "Babel" + библиотека LeaderLine.

[Антон]

Ivan Bogachev, первый раз вижу nth-of-type, всегда только чайлдом пользовался =\

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

Антон, *-child`у пофиг на тег, а *-type нет, вот и вся разница

[Антон]

Одиночка Айс, Да, уже документашку поглядел. Я даже marquee помню из начала 2000, а то что перед носом сейчас, и то умудряюсь пропускать

Answer 2

[archelon]

Сайт на бустрапе

бутстрап тут не при делах.
сверстать можно абсолютно позиционированными картинками.

и вся эта штука должна быть адаптивной

пусть дизайнер нарисует 3-4 варианта под несколько разрешений.
каждое сверстать отдельно, денег взять пропорционально.

Comments

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

денег взять пропорционально

Скажите это работодателю))

[archelon]

Одиночка Айс,
на фрилансе торгуемся,
на постоянке работаем в оплачиваемое время )