Как это сверстать, очень сложный дизайн карточки?

Question

[vahromeevilya-widestudio]

Добрый день! У меня появилась задача сверстать очень сложный макет, по понятным причином я не могу его весь показать.
Но могу показать вам кусочек, который в целом даст понимание о макете.

Как блок выглядит на ПК



И как на мобиле 320px



Кто знает как сверстать все это дело АДАПТИВНО? Объем текста может меняться в большую и меньшую сторону

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

UPD: Исходник карточки

Comments

[gazes12]

Утета карточка, очень современно выглядит xD

[DENIS Kokorev]

Дизайнер-садист — новая профессия. :)

[vahromeevilya-widestudio]

DENIS Kokorev, Ахахха, возможно, но мне самому даже из-за спортивного азарта и поднятия своих навыков хочется это сверстать.

[vahromeevilya-widestudio]

Всем, кто ждал...
Вот долгожданный ответ, как это было сделано мною. Тут вместе с адаптивом и некоторыми нюансами под мой проект.

https://codepen.io/vahromeevilya-widestudio/pen/ExQOWJy

Все величины в примере сделаны на REM и EM просто потому что так работает моя сборка, но все также будет отлично работать и с PX. А то что так много Брейкпоинтов - это динамическое изменение некоторых величин чтобы все классно адаптировалось.

Answer 1

[Владимир Пилипчук]

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

У меня бы ТАКОЕ умерло еще на стадии макета...
А вообще, самое простое - тремя div это собрать с бэкграундом, порезав картинку. Левая часть, верхняя часть и нижняя часть. У верхней сделать отрицательный margin а у конnертного блока bg-repeat. Но такой подход сложно будет назвать адаптивным. Куча ограничений.

Comments

[vahromeevilya-widestudio]

Ну здесь надо дизайн в целом смотреть, так то он выглядит очень даже круто. Мне уже совсем скоро предстоит начать это верстать, последнии согласовании по макету сделаны. Думаю, потом, если получится сделать это круто и адаптивно, в песочнице воссоздам и приложу сюда как ответ.

[Владимир Пилипчук]

Ну не знаю.
Мой бот, сидящий на шине прекрасного вернул "Нууу, ме".
На вкус и цвет... это все ИМХО.

В целом я не увидел типографики в этом... отступы и интервалы хаотичны.
Ритма в визуале нет.
Много пустого пространства, которе ни как не обыграно визуально.
Есть же правила и каноны создания интерфейсов, которые учитывают визуальное восприятие информации человеком. Зачем так грубо нарушать эту гармонию?

Можно ли э то сверстать? Можно! И даже поупражняться можно в минимизации кода верстки, отрисовать JS/svg/Action и так далее, но это будет только технический квест. Сам макет просто "не то пальто", как по мне.

[Владимир Пилипчук]

Ну что это? Объясните мне логику.
И визуально оно воспринимается так же алогично.
Есть же GRID-система, 16px, 1em и так далее...
Но это уже из другой области и не имеет отношения к вопросу.

[vahromeevilya-widestudio]

Владимир Пилипчук, Я не дизайнер xD, не смогу вам объяснить почему так, а не иначе. Но если просто глянуть на дизайн со стороны, как обычный user, то выглядит эффектно ИМХО

Answer 2

[Aetae]

Два блока с border-image - один подложка, второй - заголовок.

Comments

[vahromeevilya-widestudio]

А вот это уже интересно, есть примеры готовой реализации?

[Aetae]

Условно так:


Само собой картинка должна быть без текста, полупрозрачной и нормально обрезанной.

Поиграться можно тут.

[vahromeevilya-widestudio]

Aetae, Огромное спасибо за наводку, скорее всего так и буду верстать. Вот исходник карточки. Если не сложно могли бы вы его использовать для демонстрации на codepen?

Answer 3

[Антон Литвиненко]

Когдато в старину такие вещи делали так:
бралось картинка в png и резалась на части, так чтобы сложные элменты были на местах, а между ними тоже кусок картинки в 1 пиксель, который тянется в зависимости от количества контента

Answer 4

[olser]

Как помочь не знаю, но clip-path подходит для создания сложных фигур
https://bennettfeely.com/clippy/

Comments

[vahromeevilya-widestudio]

Ага, сам об этом думал, возможно и придется так делать. Но с помощью clip-path я не знаю как реализовать частичное заполнение блока по типу как линия сделана синия

Answer 5

[drtvader]

Нижнюю часть в SVG сделать, а все что сверху через стили пробовать.

Answer 6

[FoxSay]

Для решения тебе пригодятся псевдоэлементы и clip-path, в начале я бы начал с создания блока обертки к каторому бы задал форму через clip-path даллее внутри с синий обводкой я бы разделил на три части верхняя левая и нижняя в формате svg и расположил бы так чтобы левая часть повторялась при помощи background-repeat.