Как правильно верстать такой дизайн?

Question

[Андрей]

Здравствуйте! Собственно интересует как верстать подобные дизайны, а конкретнее фоновые изображения? Подскажите как правильнее их скомпоновать и позиционировать на странице, когда в макете каждый фон состоит из нескольких svg-элементов?

Comments

[Алекс Глебов]

там каждый слой еще бы хорошо анимировать, как на других примерах этой студии
https://dribbble.com/shots/6571511-animated-hero-f...
вообще не для новичка макет

[Андрей]

Алекс Глебов, Здравствуйте, а вы не могли бы ответить как подобную анимацию делать? Каждый элемент который будет анимированным идет отдельно, на него вешается нужная анимация и он позиционируется в конкретное место?

Answer 1

[alex-1917]

А я думал, эти дизайны не более чем витрина рисовальщика.
Неужели есть отщепенцы, кто заказывает это как реальный веб-сайт???
ООООоооОо, даже чекбоксы с градиентом... писец...

Answer 2

[lagudal]

Недавно совсем был вопрос по этому шаблону, не знаю, от вас ли от кого другого, лень искать.
Конкретно в этом случае - если посмотреть на psd - в ресурсах лежат svg, и поскольку они (svg) нетяжелые, было бы логичным использовать svg как для фонов, так и для рисунков - во первых качество их будет безупречным, во-вторых, конкретно такие svg будут на порядок легче Jpeg или png- если их оптимизировать, конечно.
В прошлый раз смотрел, когда показывали верстку, там были png по 100-200 кб, svg же - фоны вообще 1-2 кб, не больше, рисунки - по 10-20. Без потери качества.

Comments

[Андрей]

Спасибо за ответ, вопрос был не от меня

Answer 3

[Андрей Юрчук]

Флексами братан, Флексами