@warcevil

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

Как сверстать эти блоки адаптивно и возможно ли это? По картинкам:

1) Картинка с кнопкой: непонятно, как сделать так, чтобы я был уверен, что стрелки не вылезут за края. Думаю их только абсолютно позиционировать возможно, но тогда они запросто могут обрезаться. Как возможно это исключить?

2) Цитата с болтиками: болтики думаю отдельно как before и after сделать, но как сделать эту обводку, как на макете? Если делать background, то конечно получается деформированная картинка..

3) Title "Почему лучший?": Тоже самое.. чисто background не получится, потому что деформироваться начинает.

4) Человечек: Тоже самое, что и со стрелочками у кнопки. Непонятно как обеспечить, чтобы облако не вылезало за страницу.

b27e59db26a943e18f48c02d40327fbe.jpg

e6022cb41dbf4018ae4bbac71c2e870f.jpg

91352de66194420a96d76d4cc65a0c22.jpg

ce2910fbe061485fb1c0c9e25951caca.jpg
  • Вопрос задан
  • 714 просмотров
Пригласить эксперта
Ответы на вопрос 3
@Nwton
1) Придется делать как в старые добрые времена, когда не все браузеры поддерживали round border:5ca14b887bf14faaa0db7ef77955f3e4.png2) По поводу стрелочек. Проверяй js влезают ли они полностью, если да - оставляй, иначе - display: none. Хотя не думаю, что если часть не влезет, то это будет катастрофа.
3) Если экран узкий, устанавливай альтернативное облако со стрелкой вверху под человечком. Иначе - как на макете.
Ответ написан
Комментировать
@Givandos
верстка, пыха (прощай, родная), рельсы (вы кто?)
Первые 3 без особых проблем делаются порезкой фоновой картинки на части.
Вторую вообще в мобильной версии оставить без стрелочек, не нужны они на узкой экране.

А вот с облачком, то тут действительно должен думать дизайнер как сделать так, чтоб конкретно это расположение чувачка и облачка смотрелось в размере 300 пикселей по ширине. А так как это практически нереально (будет очень мелко и все детали потеряются), то дизайнер должен придумать как чувачка и облако "разделить" и отображать немного по другому их компоновку в мобильной версии (на узких экранах).
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега Вёрстка
Нежно люблю верстку
warcevil:
1. Рамка с болтиками можно сделать с помощью border-image, болтики через before и after или позиционированием bg. (Второй вариант лично мне нравится больше)
2. Блок со стрелками я бы делала через display:flex и сами стрелки фоном contain
3. Аналогично background-size: contain. Размер шрифта либо считать через vw либо изменять в точках перелома макета.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы