9

Пытаюсь представить способы и пути решения верстки подобного шаблона:

картинка шаблона верстки

Подскажите, где почитать, как сделать такой фон не целой картинкой. Интересно и отдельные белые частицы и наклонные волнистые линии.

3
  • 1
    Это ответ на твой вопрос ru.stackoverflow.com/questions/784137/…
    – Air
    21 фев 2018 в 21:57
  • Спасибо!Говорят что поддержка браузерами еще не идеальная, но изучать уже стоит! 21 фев 2018 в 22:12
  • Не правильно говорят.....
    – Air
    22 фев 2018 в 5:52

1 ответ 1

12

Один из возможных вариантов решения

Как я понял, нужно, чтобы и фон был, как на картинке, плюс и адаптивным был, и была бы возможность совместить его с вёрсткой меню, иконок-ссылок и т.д

Идеальный вариант,- это иметь хорошего, знающего дизайнера, который понимает технику вёрстки и предоставил бы вам векторный фон, без надписей, картинок иконок, текста.
И плюс к этому картинку конечного результата.
Но имеем, что имеем и учимся работать с дизайнером, то есть требовать от него, что написано выше.

Придется делать работу за дизайнера. Изогнутые линии будем рисовать в векторном редакторе.

Последовательность действий:

  • Открываем вашу картинку в векторном редакторе
  • С помощью инструмента

    введите сюда описание изображения наносим узловые точки на кривые линии

введите сюда описание изображения

  • Выделяем узловые точки - введите сюда описание изображения
  • и делаем их автоматически закругленными -- введите сюда описание изображения
  • С помощью рычагов узловых точек, подгоняем нашу кривую к существующей на картинке

  • Сохраняем файл в формате *.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> 

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.