Jump to content
  • 0

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


Question

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

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

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

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

volna-bottom.png

volna-top.png

Link to post
Share on other sites

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 post
Share on other sites
  • 0
37 минут назад, torsar сказал:

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

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

https://jsfiddle.net/ys54bhwL/

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

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

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

 

Edited by Full-R
Link to post
Share on other sites
  • 0
2 часа назад, Full-R сказал:

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

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

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

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

Link to post
Share on other sites
  • 0

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

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

Link to post
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 post
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 post
Share on other sites
  • 0
15 минут назад, torsar сказал:

 

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

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

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

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

 

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

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

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

browser.png

volna-top_1140-2.png

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

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

Link to post
Share on other sites
  • 0
10 часов назад, torsar сказал:

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

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

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

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

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

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

Link to post
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 post
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 post
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.

  • Комментарии

    • Понял, спасибо большое. Я просто думал, что если выбран класс, то и применяяется только к конкретному классу, а оказывается не правильно думал. Еще раз спасибо
    • Добрый день! Есть такая страница http://tehne.com/grant/right-bank-of-kazanka-river-competition-2021-ru Хочу сделать чтобы в мессенджерах когда отправляют ссылку вместе с заголовком показывалась определенная картинка. Я добавил эту картинку в мета тэги og и link rel="image_src"  и она все равно не появляется когда делюсь в мессенджерах Почему так?  
    • Не будет и не должно, потому как первым в списке дочерних элементов у родителя "team-descr" — это H3. <div class="team-descr"> <h3>Bradley Hunter</h3> <!-- это :first-child --> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- это :last-child --> </div> Под :first-child/:last-child подразумевается не вхождение выбранного Вами селектора, а первая нода, тег, которые одет по списку. В ваше случае псевдо-элементы будут работать только в том случае, если в контейнере первым и последним будут ".name" <div class="team-descr"> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- :first-cild --> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- :last-child --> </div>  
    • https://codepen.io/cheeroque/pen/JjEZyEL  Если вместо last:child поставить first:child то свойства работать не будут 
    • Здравствуйте. Выложите пример на https://jsfiddle.net
×
×
  • 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.