Как сверстать такое (волна с тенью)?

[torsar]

Изображения во вложении.

Волна с тенью.

Как верстать текст, менюшку и кнопко знаю. 🙂

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

[Full-R]

29 минут назад, torsar сказал:

Изображения во вложении.

Волна с тенью.

Как верстать текст, менюшку и кнопко знаю. 🙂

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

Без изображений не стоит, нужно 2 радиуса и куча умственных извращений. Сделайте SVG(Рисуем SVG с Boxy - Графические редакторы - Учим делать сайты. HTML форум. (htmlforum.io)). Попробуйте картинки перегнать в SVG, а тень можно сделать фильтром drop shadow.

 

 

[npofopr]

https://getwaves.io/

[torsar]

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

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

https://jsfiddle.net/ys54bhwL/

[Full-R]

37 минут назад, torsar сказал:

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

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

https://jsfiddle.net/ys54bhwL/

Это не правильно. Ваше изображение до сих пор не векторное так как вы вложили закодированное PNG внутрь SVG файла. Чтобы изображение хорошо расширялось нужен векторный подход.

Попробуйте прогнать PNG вот тут(тень нужно предварительно убрать, а потом накинуть фильтр drop shadow). Я иногда использую этот сервис для преобразования готовых графических файлов с прозрачностью.

Лучше всего отрисовать волну с заполнением самому. Размер файла будет приятно мал, а все остальные эффекты можно делать фильтрами и через CSS. Цвет например можно менять динамически.

 

Edited February 20, 2021 by Full-R

[torsar]

2 часа назад, Full-R сказал:

Попробуйте прогнать PNG вот тут(

Почему то урезает изображение с 1140 на 87 до 400 на 30.526315789473685

Я поменял width и height и viewBox соответственно 1140 на 87.

Но не масштабируется.

[npofopr]

Вас генератор то чем не устраивает? Зачем вы сами что то там рисуете, конвертируете и т.п. 

Есть ещё масса примеров на https://codepen.io/search/pens?q=waves 
запрос только скорректировать

[Full-R]

15 часов назад, npofopr сказал:

Вас генератор то чем не устраивает? Зачем вы сами что то там рисуете, конвертируете и т.п. 

Есть ещё масса примеров на https://codepen.io/search/pens?q=waves 
запрос только скорректировать

Сможет ли этот человек сделать волну по задумке дизайнера 1 в 1? Они же с говном людей едят даже за микроскопическое несоответствие.

 

16 часов назад, torsar сказал:

Почему то урезает изображение с 1140 на 87 до 400 на 30.526315789473685

Я поменял width и height и viewBox соответственно 1140 на 87.

Но не масштабируется.

Выложите PNG без тени - я вам помогу.

[torsar]

 

21.02.2021 в 05:38, Full-R сказал:

Выложите PNG без тени - я вам помогу.

У меня нету psd - макета.

Есть png с изображениями (типа макета, только в png - файле).

И есть такая фигня (во вложении). Это html файл.

Я не знаю, что это такоя.

 

И png без тени я выложить не могу.

Нужно такоя (я вырезал паинтом из png-макета и отмоштабировал с соблюдением пропорций)

(во вложении)

Edited February 22, 2021 by torsar

[Full-R]

15 минут назад, torsar сказал:

 

У меня нету psd - макета.

Есть png с изображениями (типа макета, только в png - файле).

И есть такая фигня (во вложении). Это html файл.

Я не знаю, что это такоя.

 

И png без тени я выложить не могу.

Нужно такоя (я вырезал паинтом из png-макета и отмоштабировал с соблюдением пропорций)

(во вложении)

Тестовое задание? Если вы уже на этом зарабатываете, лучше делайте как получается. Если же хотите стать современным и дальновидным разработчиком вернитесь и дорисуйте. У boxy есть видео на официальном сайте.

Вы с эти макетом далее попадаете скорее всего на ковейр очередной студии, где мозги не нужны, а работают по старинке не моя руки после того как какали. Хоть и макет неплохой.

[torsar]

10 часов назад, torsar сказал:

И есть такая фигня (во вложении). Это html файл.

Я не знаю, что это такоя.

Первое вложение.

Что это такое?

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

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

[torsar]

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

Волна (svg) не отображается в ie  11.
В чем проблема?

[Full-R]

33 минуты назад, torsar сказал:

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

Волна (svg) не отображается в ie  11.
В чем проблема?

IE 11 никто не делает, а в Газпром вас не возьмут 😉 Никто уже не сможет оплатить такую работу по поддержке.

<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">
  <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>

Если убрать style, то ни каких отступов не появляется. Нужно  сделать SVG через background чтобы все тянулось как надо.

[torsar]

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

https://jsfiddle.net/6xtek9yz/

[Full-R]

03.03.2021 в 14:41, torsar сказал:

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

https://jsfiddle.net/6xtek9yz/

Не надо делать SVG инлайном в HTML. Сделайте background image и разберитесь как он работает. Изображение в качестве фона HTML элемента прекрасно натягивается как угодно без всяких отступов.