Перейти к публикации

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


Рекомендованные сообщения

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

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

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

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

volna-bottom.png

volna-top.png

Ссылка на сообщение
Поделиться на других сайтах
29 минут назад, torsar сказал:

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

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

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

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

volna-bottom.png

volna-top.png

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

 

 

Ссылка на сообщение
Поделиться на других сайтах

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

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

https://jsfiddle.net/ys54bhwL/

Ссылка на сообщение
Поделиться на других сайтах
37 минут назад, torsar сказал:

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

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

https://jsfiddle.net/ys54bhwL/

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

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

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

 

Изменено пользователем Full-R
Ссылка на сообщение
Поделиться на других сайтах
2 часа назад, Full-R сказал:

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах
15 часов назад, npofopr сказал:

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

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

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

 

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

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

 

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

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

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

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

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

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

 

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

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

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

browser.png

volna-top_1140-2.png

Изменено пользователем torsar
Ссылка на сообщение
Поделиться на других сайтах
15 минут назад, torsar сказал:

 

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

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

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

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

 

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

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

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

browser.png

volna-top_1140-2.png

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

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

Ссылка на сообщение
Поделиться на других сайтах
10 часов назад, torsar сказал:

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

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

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

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

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

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

Ссылка на сообщение
Поделиться на других сайтах

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

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

Ссылка на сообщение
Поделиться на других сайтах
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 чтобы все тянулось как надо.

Ссылка на сообщение
Поделиться на других сайтах

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

https://jsfiddle.net/6xtek9yz/volna-bottom_1440.png

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Статистика пользователей

    47 305
    Всего пользователей
    1 451
    Рекорд онлайна
    kenwood
    Новый пользователь
    kenwood
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...