Гость
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать такое (волна с тенью)? / 13 сообщений из 13, страница 1 из 1
19.02.2021, 16:05
    #40047192
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
Изображения во вложении.
Волна с тенью.
Как верстать текст, менюшку и кнопко знаю. 🙂

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

C ув. Tors
...
Рейтинг: 0 / 0
19.02.2021, 16:06
    #40047193
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
...
Рейтинг: 0 / 0
19.02.2021, 18:07
    #40047276
DHDD
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
tors,

нарисовать svg эту фигуру, залить цветом.
установить её бэкграундом (файлом или содержимым)
Код: css
1.
background:url("data:image/svg+xml;...") center repeat-x;
...
Рейтинг: 0 / 0
20.02.2021, 10:55
    #40047457
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
Хе-хе.
Сверстал. :)

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

https://jsfiddle.net/ys54bhwL/
...
Рейтинг: 0 / 0
20.02.2021, 13:03
    #40047498
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
...
Рейтинг: 0 / 0
22.02.2021, 21:58
    #40048018
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/

Только при уменьшении размера браузера по горизонтали
появляется зазор между <div> и <svg>.
Как решить проблему?
...
Рейтинг: 0 / 0
23.02.2021, 00:39
    #40048052
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
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" >
...
Рейтинг: 0 / 0
23.02.2021, 09:21
    #40048063
DHDD
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
tors

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


убери height: 87px;
...
Рейтинг: 0 / 0
23.02.2021, 14:41
    #40048141
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
...
Рейтинг: 0 / 0
23.02.2021, 16:07
    #40048176
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/


Волна (svg) не отображается в ie 11.
В чем проблема?
...
Рейтинг: 0 / 0
23.02.2021, 16:27
    #40048178
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
...
Рейтинг: 0 / 0
03.03.2021, 12:45
    #40050251
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
Как сделать тень сверху, как во вложении.
И как убрать зазор между svg и div.main-footer?

https://jsfiddle.net/6xtek9yz/
...
Рейтинг: 0 / 0
03.03.2021, 15:49
    #40050370
DHDD
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как сверстать такое (волна с тенью)?
tors,
1. тень ты же снизу как-то сделал.
2. зазор (и останется белая полоска из SVG):

Код: css
1.
2.
3.
svg#svg {
    display: block;
}
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать такое (волна с тенью)? / 13 сообщений из 13, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]