Пытаюсь представить способы и пути решения верстки подобного шаблона:
Подскажите, где почитать, как сделать такой фон не целой картинкой. Интересно и отдельные белые частицы и наклонные волнистые линии.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПытаюсь представить способы и пути решения верстки подобного шаблона:
Подскажите, где почитать, как сделать такой фон не целой картинкой. Интересно и отдельные белые частицы и наклонные волнистые линии.
Как я понял, нужно, чтобы и фон был, как на картинке, плюс и адаптивным был, и была бы возможность совместить его с вёрсткой меню, иконок-ссылок и т.д
Идеальный вариант,- это иметь хорошего, знающего дизайнера, который понимает технику вёрстки и предоставил бы вам векторный фон, без надписей, картинок иконок, текста.
И плюс к этому картинку конечного результата.
Но имеем, что имеем и учимся работать с дизайнером, то есть требовать от него, что написано выше.
Придется делать работу за дизайнера. Изогнутые линии будем рисовать в векторном редакторе.
Последовательность действий:
С помощью инструмента
С помощью рычагов узловых точек, подгоняем нашу кривую к существующей на картинке
Сохраняем файл в формате *.svg
Забираем патчи кривых из файла
<circle cx="435" cy="185" r="120" fill="#D7D7D5" />
Ниже полный код векторного, адаптивного фона:
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 655 364" id="svg2" version="1">
<image xlink:href="https://i.stack.imgur.com/lFxHW.png" width="100%" height="100%" id="image4"/>
<g stroke="none">
<path d="m428 2c0 0 68 35 104 46 23 7 48 7 71 13 17 5 50 19 50 19l2 284-91-1c0 0-4-37-10-55-6-16-13-33-25-46C499 233 452 228 421 201 390 175 371 140 347 106 335 88 327 72 312 50 299 31 262 2 262 2Z" id="path3342" style="fill:#37417e;"/>
<path d="M0 265 0 364l164 0c0 0-9-3-13-5-13-7-23-16-35-25-6-5-12-10-19-14-9-5-20-8-30-13-7-3-13-8-19-12-4-2-8-4-11-6-3-2-7-4-10-6-4-3-6-6-10-9-3-2-5-5-9-7-2-1-7-3-7-3z" id="path3360" style="fill:#37417e;"/>
<path d="M0 279 0 364 70 363c0 0-6-3-9-6-2-2-3-6-4-9-1-4-2-8-4-12-2-3-4-6-7-9-3-3-7-6-9-9-2-3-4-7-6-10-2-3-4-6-7-9-3-3-6-5-9-8-4-3-7-6-11-9-2-1-4-5-4-5z" id="path3362" style="fill:#E53063;"/>
<path d="m430 2 224-1 0 0-1 79c0 0-30-1-45-5-16-6-32-13-48-18-20-5-36-3-68-15C469 34 430 2 430 2Z" id="path3364" style="fill:#E53063;"/>
</g>
<circle cx="435" cy="185" r="120" fill="#D7D7D5" />
</svg>
Сейчас у нас одновременно совмещены векторный фон, плюс картинка из вопроса автора.
Я конечно не буду делать полную вёрстку, лишь начну её.
Автор вопроса сделает вёрстку, как ему нравится. Сейчас надо просто определиться, как связать векторный фон с остальными элементами.
Так как фон занимает всё пространство, то html
элементы будут выше на слой z-index:1;
и абсолютно спозиционированы, чтобы попасть в нужное место.
Блок, с svg
кодом будет - position:relative;
блок с html
- position:absolute;
В примере верстки добавляются лишь два слова Интересный Ресторан
Зеленая рамка показывает границы блока html
.
Когда закончите вёрстку уберите из svg
блока строчку добавляющую png
фон.
<image xlink:href="https://i.stack.imgur.com/lFxHW.png" width="100%" height="100%" id="image4"/>
.container{
position:relative;
width:100%;
height:100%;
}
.menuSite {
width:30%;
height:60%;
position:absolute;
z-index:1;
top:20%;
left:16%;
padding-left:1em;
padding-top:-1.5em;
outline:1px solid green;
}
.p1{
font-size:2em;
color:#B1CFDC;
}
.p2{
font-size:1.3em;
color:#D5B2C2;
}
<div class="menuSite">
<p class="p1"> Интересный </p>
<p class="p2">РЕСТОРАН </p>
</div>
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 655 364" id="svg2" version="1">
<image xlink:href="https://i.stack.imgur.com/lFxHW.png" width="100%" height="100%" id="image4"/>
<g stroke="none">
<path d="m428 2c0 0 68 35 104 46 23 7 48 7 71 13 17 5 50 19 50 19l2 284-91-1c0 0-4-37-10-55-6-16-13-33-25-46C499 233 452 228 421 201 390 175 371 140 347 106 335 88 327 72 312 50 299 31 262 2 262 2Z" id="path3342" style="fill:#37417e;"/>
<path d="M0 265 0 364l164 0c0 0-9-3-13-5-13-7-23-16-35-25-6-5-12-10-19-14-9-5-20-8-30-13-7-3-13-8-19-12-4-2-8-4-11-6-3-2-7-4-10-6-4-3-6-6-10-9-3-2-5-5-9-7-2-1-7-3-7-3z" id="path3360" style="fill:#37417e;"/>
<path d="M0 279 0 364 70 363c0 0-6-3-9-6-2-2-3-6-4-9-1-4-2-8-4-12-2-3-4-6-7-9-3-3-7-6-9-9-2-3-4-7-6-10-2-3-4-6-7-9-3-3-6-5-9-8-4-3-7-6-11-9-2-1-4-5-4-5z" id="path3362" style="fill:#E53063;"/>
<path d="m430 2 224-1 0 0-1 79c0 0-30-1-45-5-16-6-32-13-48-18-20-5-36-3-68-15C469 34 430 2 430 2Z" id="path3364" style="fill:#E53063;"/>
</g>
<circle cx="435" cy="185" r="120" fill="#D7D7D5" />
</svg>
</div>