Как сверстать адаптивно блок?

Question

[Secret73]

Всем привет. Мне нужно сверстать вот такой блок joxi.ru/nAyJbjxUYypoYr Подскажите пожалуйста как его сверстать адаптивно, что бы при различных разрешениях, стык между двумя слоями был всегда по центру иконок?Я пока только придумал clip patch но и то у него идет смещение, и иконки смещаются с черного фона

Answer 1

[Максим Тимофеев]

Не совсем понятно что это и как будет использоваться. Как по мне - это svg или canvas, зависит дальнейшего использования. Городить такое кроссбраузерно на css+html то еще занятие.

Comments

[Secret73]

Под этими иконками будет текст что то типо утп. Можете привести пример как это сделать на svg или canvas. Сейчас я сделал черный слой это clip pacth второй слой background image содержимое с иконками в bootstrap сетке только их положение регулирую margin-top. Но при адаптиве все равно сьезжают Иконки. При разрешении 1920 иконки расположены как на скриншоте выше. А вот при 1320 вот так съезжает. joxi.ru/l2ZxlDRtwD0N3r Вопрос как это избежать?

[Максим Тимофеев]

утп

уникальное торговое предложение? Тут собственно не важна бизнес логика, я имею в виду будут это кликать, будут ли это двигать. С УТП много вариантов.

Сейчас я сделал черный слой это clip path

https://caniuse.com/#search=clippath

Вопрос как это избежать?

перенесите код в песочницу, скрины это ни о чем

[Secret73]

Максим Тимофеев, Ничего это будет происходить, это просто статичный блок шириной col-md-4. Не могу перенести в песочницу, потому что у меня это все на bootstrap 4.

[Максим Тимофеев]

Secret73,

потому что у меня это все на bootstrap 4.

а чем bootstrap 4 мешает переносу в песочницу?
https://jsfiddle.net/ - вообще 1 кликом bootstrap подключает

[Secret73]

Максим Тимофеев, Прежде всего спасибо Вам за то, что пытаетесь выбить из меня информацию )))Вот я закинул в песочницу. https://jsfiddle.net/tjn4mm4p/ И так еще раз повторюсь, что требуется. Мне нужно, что бы при различных разрешениях экрана, края черного фона всегда проходили через иконки ,а сейчас при адаптиве оно смещается, то до иконок, то после них. Я имею в виду разрешения от 1201px до 1920p. Потому что мнее 1201 px понятно что оно съезжать будет )

[Максим Тимофеев]

Secret73, надо svg делать

[Secret73]

Максим Тимофеев, А можете посоветовать какой нибудь сервис или как это делается? Просто с svg не работал, а как раз очень бы хотелось, пригождается все чаще и чаще

[Максим Тимофеев]

Secret73, основы тут: https://www.w3schools.com/graphics/svg_intro.asp
по халявное тут (без основ не разберетесь, вначале ссылка выше и ручками в блокноте): inkscape.org
Ну а потом:
https://css-tricks.com/smil-is-dead-long-live-smil...
https://developer.mozilla.org/en-US/docs/Web/SVG/S...

[Secret73]

Максим Тимофеев, Большое спасибо. Буду пробывать

[Secret73]

Максим Тимофеев, Подскажите пожалуйста, что я делаю не так?
Я сделал следующее:
1. Зашел на сайт https://photolessons.org/svg/ загрузил туда нужный мне черный фон в формате svg.
2. Получил его код

<svg width="1915" height="809" class="test" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path d="m647.68071,442.16045c-288.087,-12.00231 -425.686,35.79563 -643.822,183.24788l0,-619.37037l1877.49,0c0,0 84.4,0 0,114.00396c-84.41,114.00396 -263.28,96.54905 -439.2,190.51649c-253.82,103.9478 -425.13,135.49129 -794.468,131.60204z" fill="#070D10" id="svg_1"/>
 </g>
</svg>

3. Вставил в html и добавил css стили

.test {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

4. И все равно, не получается удержать иконки на месте
5. Вот что получается joxi.ru/D2Pd3pYTpdJvY2 и joxi.ru/vAWOLwKU1kOGxA
Что я не так делаю?

[Максим Тимофеев]

Secret73, Иконки тоже в svg, все в svg сделайте, тогда будет правильно.

[Secret73]

Максим Тимофеев, А иконки просто картинки в формате svg или кодом тоже? А что еще "все?"

[Максим Тимофеев]

Secret73, кодом, зачем картинками?

[Secret73]

Максим Тимофеев, Я понял, о чем Вы говорите. Но тогда получается что текст который будет под иконками будет скакать и возможно даже наезжать на иконки?)

[Максим Тимофеев]

Secret73, почему? Текст тоже в svg. Весь блок, все в одном svg, тогда все будет хорошо. При этом если svg вставлен в htl как код, то все отлично индексируется, стилизуется через css, дергается в js и т.д.

[Secret73]

Максим Тимофеев, А я можно на моем примере показать как туда текст вставить? А то он у меня еще и в bootstrap не представляю как это все выглядит

[Максим Тимофеев]

Secret73, https://developer.mozilla.org/ru/docs/Web/SVG/Элемент/
https://www.w3schools.com/graphics/svg_text.asp

[Secret73]

Максим Тимофеев, ок. С этим разобрался. Теперь остался вопрос.ю как иконки загнать туда. Потому что если как я делал выше ,через сервис который показывал выше, он из иконок делает просто, размытые кругляшки

[Максим Тимофеев]

Secret73, https://github.com/encharm/Font-Awesome-SVG-PNG/tr...

[Secret73]

А если там нету иконок, которые в макете?)

[Максим Тимофеев]

Secret73, свои сделать в чем проблема? Разберитесь с svg, я же дал ссылки. Там кодом отрисовать (ручками) - дело 15 минут

Answer 2

[Павел Вахненко]

Используй библиотеки, фреймы.

Comments

[Secret73]

Какие?

[Павел Вахненко]

Secret73, laravel, bootstrap,Pure... итд. Список очень большой.

[Secret73]

Павел Вахненко, Я и пользуюсь bootstrap

[Павел Вахненко]

Secret73, тогда какие у тебя возникают вопросы?))

[Secret73]

Павел Вахненко, Мне нужно что бы край черного изображения(волна которая на скрине) при адаптиве всего проходила строго через иконки и ни как подругому

[Максим Тимофеев]

Павел Вахненко, у меня возникает такой вопрос, даже 2: "Вы вопрос читали?" и "При чем тут frame-ы и библиотеки?"