Как верстать такие сайты?

Question

[Роман]

Добрый день!

Искал идеи для вдохновения и наткнулся на вот такой дизайн revision.ru/work/104072 - подача очень понравились, т.к. выражают настроение будущего проекта.

Собственно, будет разрабатывается дизайн в таком стиле "кривые линии" к примеру: поле ввода поиска, переходы шапка, отзывы, подвал. Сайт будет адаптивным и как верстать эти блоки, что т слабо представляю. Не хочется городить кучу .png картинок background'ами - есть какое ни будь более лучшее решение?

Спасибо!

Comments

[Сергей delphinpro]

SVG
Соответственно дизайнеру нужно напрячься, что бы его творение легко перегонялось в вектор

[Роман]

Сергей, а какие ни будь примеры? Буду очень благодарен, пока не совсем укладывается в голове, что нужно?

[Сергей delphinpro]

Роман Лазарев, примеры чего? как положить svg картинку на бэкграунд или бордер? =)

[Роман]

Сергей, да зачем!? Подобные сайты с таким дизайном! Подумал если есть мысли, как реализовать, то возможно видели/знаете такие проекты!

[Сергей delphinpro]

Роман Лазарев, А, ну мне приходилось верстать отдельные элементы с кривыми границами, не целиком сайты в таком стиле. Кладешь svg картинку фоном. Она ретиновая, резиновая. Всё прекрасно.
Примеров не найду

[Роман]

Сергей, если отталкиваться от дизайна, что в ссылке выше, то с переходами (отзывы/подвал) примерно понял как сделать. А как быть блоками (по середине сайта (успей купить)) эту рамку, если не адаптивный дизайн, то вопросов бы не было, а тут? Меда запросами подставлять/отключать другие картинки?

[Сергей delphinpro]

Роман Лазарев, background-size: 100%;
В определенных пределах будет масштабироваться отлично. Дальше может сильно искажаться в плане того что радиусы закругления увеличатся. тут медиазапрос - и другая скорректированная картинка. Учитывая небольшой размер файлов svg - нестрашно. Можно даже в base64 внутрь css засунуть.

[Роман]

Сергей, Спасибо, буду думать )))

Answer 1

[Артур Карапетян]

border-image ,
svg , ::after / ::before

Comments

[Роман]

... а какие ни будь примеры? Буду очень благодарен, пока не совсем укладывается в голове, что нужно?

[alvvi]

Роман Лазарев, https://www.poidem.ru/
но что это вам даст?

[Роман]

Илья Ростопка, не совсем то, что хотел увидеть, но за ссылку спасибо!