способ верстки волнистого фона. сложный фон

#html #css #вёрстка #svg #inkscape

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



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

Ответы

Ответ 1

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

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

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

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

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


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

  наносим узловые точки на кривые линии    


 


Выделяем узловые точки  -        
и делаем их автоматически закругленными -- 
С помощью рычагов узловых точек, подгоняем нашу кривую к существующей
на картинке       
Сохраняем файл в формате *.svg  
Забираем патчи кривых из файла  
Добавляем цвет в криволинейные области   
Вместо круглой картинки слайдера добавляем окружность, для того чтобы
вы в дальнейшем могли добавить на это место рабочий слайдер поверх
фона


   

Ниже полный код векторного, адаптивного фона:






    

Вёрстка

Сейчас у нас одновременно совмещены векторный фон, плюс картинка из вопроса автора.
 Я конечно не буду делать полную вёрстку, лишь начну её.    

Автор вопроса сделает вёрстку, как ему нравится. Сейчас надо просто определиться,
как связать векторный фон с остальными элементами.  

Так как фон занимает всё пространство, то html элементы будут выше на слой z-index:1;
и абсолютно спозиционированы, чтобы попасть в нужное место.
 Блок, с svg кодом будет - position:relative; блок с html - position:absolute;    

В примере верстки добавляются лишь два слова Интересный Ресторан     

Зеленая рамка показывает границы блока html.       

Когда закончите вёрстку уберите из svg блока строчку добавляющую png фон.  

    




.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;
}

 Интересный  
 
РЕСТОРАН