Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Как сверстать такое (волна с тенью)?  [new]
tors
Member

Откуда: Харьков
Сообщений: 1714
 		Изображения во вложении.
Волна с тенью.
Как верстать текст, менюшку и кнопко знаю. 🙂

Без изображений можно?

C ув. Tors

К сообщению приложен файл. Размер - 77Kb
19 фев 21, 16:05    [22283566]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
tors
Member

Откуда: Харьков
Сообщений: 1714

К сообщению приложен файл. Размер - 56Kb
19 фев 21, 16:06    [22283567]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
DHDD
Member

Откуда:
Сообщений: 53
 		tors,

нарисовать svg эту фигуру, залить цветом.
установить её бэкграундом (файлом или содержимым)
background:url("data:image/svg+xml;...") center repeat-x;
19 фев 21, 18:07    [22283674]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
tors
Member

Откуда: Харьков
Сообщений: 1714
 		Хе-хе.
Сверстал. :)

Гляньте. может что посоветуете? :)

https://jsfiddle.net/ys54bhwL/
20 фев 21, 10:55    [22283961]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 18771
 		tors,
https://svg-art.ru/
20 фев 21, 13:03    [22284034]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
tors
Member

Откуда: Харьков
Сообщений: 1714
 		Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/

Только при уменьшении размера браузера по горизонтали
появляется зазор между <div> и <svg>.
Как решить проблему?
22 фев 21, 21:58    [22284933]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
voraa
Member

Откуда:
Сообщений: 178
 		tors,
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1140 87" style="width: 100%; height: 87px;" preserveAspectRatio="xMinYMin">

Сообщение было отредактировано: 23 фев 21, 00:32
23 фев 21, 00:39    [22284993]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
DHDD
Member

Откуда:
Сообщений: 53
tors↑

появляется зазор между <div> и <svg>.
Как решить проблему?


убери height: 87px;
23 фев 21, 09:21    [22285024]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 18771
 		tors,

https://jsfiddle.net/hv5qe9m2/
23 фев 21, 14:41    [22285145]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
tors
Member

Откуда: Харьков
Сообщений: 1714
 		Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/


Волна (svg) не отображается в ie 11.
В чем проблема?
23 фев 21, 16:07    [22285198]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 18771
 		tors,

https://caniuse.com/?search=svg
23 фев 21, 16:27    [22285204]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
tors
Member

Откуда: Харьков
Сообщений: 1714
 		Как сделать тень сверху, как во вложении.
И как убрать зазор между svg и div.main-footer?

https://jsfiddle.net/6xtek9yz/

К сообщению приложен файл. Размер - 14Kb
3 мар 21, 12:45    [22288975]     Ответить | Цитировать Сообщить модератору
 Re: Как сверстать такое (волна с тенью)?  [new]
DHDD
Member

Откуда:
Сообщений: 53
 		tors,
1. тень ты же снизу как-то сделал.
2. зазор (и останется белая полоска из SVG):

svg#svg {
    display: block;
}
3 мар 21, 15:49    [22289135]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить