Jump to content
  • Sign Up
  • 0

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


torsar
 Share

Question

14 answers to this question

Recommended Posts

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

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

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

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

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

volna-bottom.png

volna-top.png

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

 

 

Link to comment
Share on other sites

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

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

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

https://jsfiddle.net/ys54bhwL/

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

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

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

 

Edited by Full-R
Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

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

 

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

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

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

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

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

Link to comment
Share on other sites

  • 0

 

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

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

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

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

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

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

 

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

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

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

browser.png

volna-top_1140-2.png

Edited by torsar
Link to comment
Share on other sites

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

 

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

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

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

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

 

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

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

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

browser.png

volna-top_1140-2.png

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0
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 чтобы все тянулось как надо.

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Наташа
      Здравствуйте, никак не могу зайти на свой первый сайт. У меня очень простой статический сайт состоящий из файлов: html-страницы (в том числе index.html), css, jpg, favicon.ico, robots.txt. Все материалы я загрузила в корневую папку бесплатного веб-сервера beget. Почему-то вместо страниц сайта браузер отображает один только файл css. Уже пробовала разные способы решить эту проблему, но ничего не получается. В чём может быть причина? Заранее спасибо.  С уважением, Наташа.
    • Evgen73
      Постав Firefox Developer Edition, там лучше  все будет видно и удобнее
    • Dmitro
      Освоил Flexbox, БЭМ, понимаю как использовать пре-процессор SASS/SCSS. Добавилось ещё немного работ в портфолио. Сейчас изучаю литературу по основам JS, дабы заполнить пробелы, изучить новое.
    • Natalya_2024
      Здравствуйте, подскажите в чем может быть причина такой ситуации. Адаптирую сайт под разные устройства, все было хорошо, проверила как отображается, сохранила, но когда открыла повторно все съехало, но только под одно устройство (575рх) Меню после пролистывания занимает нужную ширину  Остальные размеры сохраняются , начиная с 770рх Код не менялся, проверяла несколько сохраненных на разных этапах верстки, все были рабочие и на всех слетело одно и тоже, хотя с ними дальнейшей работы не было, также проверяла на разных браузерах, проблема одна (( Буду благодарна за помощь 
    • KatiaBeing
      Подскажите пожалуйста, как правильно сделать кастомный список стран используя API. Вот fetch код:   const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами. Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy