ReSQL.ru
     
powered by simpleCommunicator - 2.0.41     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать такое (волна с тенью)?
13 сообщений из 13, страница 1 из 1
Как сверстать такое (волна с тенью)?
    #40047192
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Изображения во вложении.
Волна с тенью.
Как верстать текст, менюшку и кнопко знаю. 🙂

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

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

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

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

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

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

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


убери height: 87px;
...
Рейтинг: 0 / 0
23.02.2021, 09:21
| Ответить | Цитировать | Написать  
Как сверстать такое (волна с тенью)?
    #40048141
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
tors,

https://jsfiddle.net/hv5qe9m2/
...
Рейтинг: 0 / 0
23.02.2021, 14:41
| Ответить | Цитировать | Написать  
Как сверстать такое (волна с тенью)?
    #40048176
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/


Волна (svg) не отображается в ie 11.
В чем проблема?
...
Рейтинг: 0 / 0
23.02.2021, 16:07
| Ответить | Цитировать | Написать  
Как сверстать такое (волна с тенью)?
    #40048178
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
tors,

https://caniuse.com/?search=svg
...
Рейтинг: 0 / 0
23.02.2021, 16:27
| Ответить | Цитировать | Написать  
Как сверстать такое (волна с тенью)?
    #40050251
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Как сделать тень сверху, как во вложении.
И как убрать зазор между svg и div.main-footer?

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

Код: css
1.
2.
3.
svg#svg {
    display: block;
}
...
Рейтинг: 0 / 0
03.03.2021, 15:49
| Ответить | Цитировать | Написать  
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как сверстать такое (волна с тенью)?
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=40048176&tid=1443289]:
 0ms
get settings:
 9ms
get forum list:
 12ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 26ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 44ms
get tp. blocked users:
 1ms
others: 11ms
total:  119ms
созд. / загр.: 119ms
x
x
Закрыть


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