Как это верстать?

Question

[Levott]

Не пойму как верстать такой дизайн, наделают таких дизайнов, а нам джунам верстать(((
понимаю как верстать все кроме мечей и вот этих домов сзади

Comments

[Кирилл Никитин]

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

[Levott]

Кирилл Никитин, что вы имеете в виду под многослойностью?

[Кирилл Никитин]

Levott, z-index.

[szQocks]

Кирилл Никитин, там ещё вроде blur есть, фильтр на мече который самый ближний справа, ну или картинка такая хз

[Кирилл Никитин]

szQocks, если это один и тот же меч на три дива, то да. А если три разных меча или одна большая картинка, то он сразу с блюром может быть.

[szQocks]

Кирилл Никитин, скорее всего картинка такая, а я туплю), ведь скрин сделан из фигмы и мечи все разные

[Кирилл Никитин]

szQocks, ну почему же, я вижу что это один и тот же меч, просто по разному повёрнутый. На css это всё реально.

[szQocks]

Кирилл Никитин, не не , 2 меча точно разные. там объём у них разный, а вот который с блюром, он такой же как и меч слева правда на нём просто блюр, но да ладно

а хотя если увеличить меч слева, то объём будет возможно тот что справа, а может и действительно 3 меча одинаковых, хм

[Кирилл Никитин]

szQocks, это один и тот же меч, просто повернутый, так часто делают на самом деле.

[Максим]

Levott, по моему в three есть такая плюшка, там автобусы ездиют, люди ходят...красиво выглядит, дорого смотрится...на css такое ни сделать

https://threejs.org/examples/#webgl_animation_keyframes

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

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

Максим, человек не знает как верстать, куда ему анимации такие)

[senator]

Кирилл Никитин, это 3d? На 3d похоже

[Кирилл Никитин]

senator, где? Макет 2D, графика на макете в 3D, но не обязательно. Чем это должно стать в результате — без понятия.

[Максим]

Одиночка Айс, согласен, я погорячился ...но идея хорошая

Answer 1

[Сергей delphinpro]

Обычные картинки на фоне.
Фоны могут быть множественными.
Фоны могут позиционироваться.
Плюс медиа-запросы для корректировки.

Answer 2

[godsplan]

background-image

Answer 3

[Deita]

Это называется Parallax

Answer 4

[Александр Пешков]

Множественный фон + поиграться с opacity