Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2021, 15:03
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 344

Как сверстать такое (волна с тенью)?
Изображения во вложении.
Волна с тенью.
Как верстать текст, менюшку и кнопко знаю. ????

Без изображений можно?
Изображения:
Тип файла: jpg volna-bottom.jpg (8.2 Кб, 9 просмотров)
Тип файла: jpg volna-top.jpg (11.6 Кб, 10 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 20.02.2021, 09:51
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 344

Хе-хе.
Сверстал.

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

https://jsfiddle.net/ys54bhwL/
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2021, 14:20
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

.container {
   clip-path: polygon(100% 0%, 0% 0% , 0% 65%, 1% 64.95%, 2% 64.8%, 3% 64.6%, 4% 64.3%, 5% 63.9%, 6% 63.45%, 7% 62.9%, 8% 62.25%, 9% 61.55%, 10% 60.8%, 11% 59.95%, 12% 59.05%, 13% 58.1%, 14% 57.1%, 15% 56.05%, 16% 55%, 17% 53.9%, 18% 52.8%, 19% 51.65%, 20% 50.5%, 21% 49.35%, 22% 48.2%, 23% 47.05%, 24% 45.9%, 25% 44.8%, 26% 43.75%, 27% 42.75%, 28% 41.75%, 29% 40.8%, 30% 39.9%, 31% 39.1%, 32% 38.35%, 33% 37.65%, 34% 37.05%, 35% 36.5%, 36% 36.05%, 37% 35.65%, 38% 35.35%, 39% 35.15%, 40% 35.05%, 41% 35%, 42% 35.05%, 43% 35.2%, 44% 35.45%, 45% 35.75%, 46% 36.15%, 47% 36.65%, 48% 37.2%, 49% 37.85%, 50% 38.55%, 51% 39.35%, 52% 40.2%, 53% 41.1%, 54% 42.05%, 55% 43.05%, 56% 44.1%, 57% 45.15%, 58% 46.3%, 59% 47.4%, 60% 48.55%, 61% 49.7%, 62% 50.85%, 63% 52%, 64% 53.15%, 65% 54.25%, 66% 55.35%, 67% 56.4%, 68% 57.45%, 69% 58.4%, 70% 59.35%, 71% 60.2%, 72% 61.05%, 73% 61.8%, 74% 62.45%, 75% 63.05%, 76% 63.6%, 77% 64.05%, 78% 64.4%, 79% 64.7%, 80% 64.85%, 81% 65%, 82% 65%, 83% 64.9%, 84% 64.75%, 85% 64.5%, 86% 64.2%, 87% 63.75%, 88% 63.25%, 89% 62.7%, 90% 62.05%, 91% 61.3%, 92% 60.5%, 93% 59.65%, 94% 58.75%, 95% 57.8%, 96% 56.8%, 97% 55.75%, 98% 54.65%, 99% 53.55%, 100% 52.4%);
}
Ответить с цитированием
  #4 (permalink)  
Старый 22.02.2021, 20:54
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 344

Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/

Только при уменьшении размера браузера по горизонтали
появляется зазор между <div> и <svg>.
Как решить проблему?
Ответить с цитированием
  #5 (permalink)  
Старый 23.02.2021, 07:18
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,101

<style>
html {
  width: 100%;
  height: 100%;
}

body {
  max-width: 1140px;
  width: 100%;
  height: 100%;
  margin: auto;
}

div {
  width: 100%;
  height: 324px;
  background: rgb(54, 40, 124);
}

</style>
<div>
</div>
<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">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="5px" flood-color="#1B0C42" flood-opacity="50%" stdDeviation="3" />
    </filter>
  </defs>
  <path d="M 0 60 C 0 60 283 87 427 43.5 C 427 43.5 855 -60 1143 60 L 1143 0 0 0 Z" style="stroke:none;fill:rgb(54, 40, 124);filter:url(#shadow);" />
</svg>
Ответить с цитированием
  #6 (permalink)  
Старый 23.02.2021, 15:03
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 344

Новая версия:
https://jsfiddle.net/torsar/df3wnxL2/2/


Волна (svg) не отображается в ie 11.
В чем проблема?
Ответить с цитированием
  #7 (permalink)  
Старый 23.02.2021, 17:15
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 1,101

Может потому, что ИЕ не поддерживает фильтр feDropShadow
https://caniuse.com/?search=fedropshadow
Ответить с цитированием
  #8 (permalink)  
Старый 03.03.2021, 11:36
Профессор
Отправить личное сообщение для torsar Посмотреть профиль Найти все сообщения от torsar
 
Регистрация: 06.01.2012
Сообщений: 344

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

https://jsfiddle.net/6xtek9yz/
Изображения:
Тип файла: jpg volna-bottom_1440.jpg (2.2 Кб, 2 просмотров)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как создать цитатник? WGN Общие вопросы Javascript 10 29.01.2017 00:39
Как сохранить данные в файл? Возможно такое на JavaScript? Forgott Общие вопросы Javascript 35 26.06.2015 19:11
Как правильно реализовать такой функционал? Julian Общие вопросы Javascript 3 16.01.2015 11:34
Как правильно записать такое условие hhh Общие вопросы Javascript 5 16.09.2014 14:15
Открытие div блока при первом визите на сайт Nushaba Общие вопросы Javascript 28 20.12.2013 19:24