Как верстать макет?

Question

[Владислав Линник]

Подскажите как верстать такой макет? Не верстал подобные...
Интересует:
1. Полоска в табах, заканчивается на середине, как лучше реализовать?
2. Как лучше сделать левый и средний блок с цифрами?
3. В полях ввода слева и справа отблески и прямоугольный блок, как лучше реализовать?



Заранее благодарен за помощь

Comments

[Dima Polos]

Предложите дизайнеру попробовать сверстать)))

[Артур Карапетян]

Очень. Много. SVG.

[McBernar]

Самое время сливаться, если есть возможность.

[alex-1917]

нарезай прямо из макета картинками и в путь.
все равно подобные проекты не живут более полугода, а вы хотите судя по тому что не нашли решения - создать проект на века...)))

[Programmir]

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

[posters]

Конечно. Зачем делать что-то необычное и нестандартное? Пускай все сайты в интернете будут однообразными и унылыми... А CSS вообще какие-то извращенцы придумали. Главное это информация и понятный интерфейс, чтобы пользователя ничего не отвлекало. Одной голой HTML разметки вполне достаточно. Так этому вашему дизайнеру и передайте, чтобы все было строго и без излишеств.

Answer 1

[ⓒⓢⓢ]

Весь блок (например, section) имеет фон в 3 слоя (слой не путать с блоком)
1 слой покрываете линейным градиентом (linear-gradient)
2 слой покрываете радиальным градиентом (radial-gradient) с бирюзовым цветом (отблески)
3 слой наносите текстуру в виде шестиугольника

Блок по левой стороне
Делаете цельным вектором, обязательно с группировкой. - в дальнейшем будет удобно менять статус кнопки

Центральный блок
Делаете так же векторные элементы для кубиков.
Текст можно позиционировать отдельными блоками.
Рамки для полей ввода можно сделать только боковые (по левой и правой стороне), верх\низ соответственно будет border

Блок по правой стороне
Это отдельный aside блок с вкладками, а для фона делаете 2 слоя с линейным градиентом:
- Первый слой фона для верхней линии (разделяющую кнопки вкладок)
- Второй слой фона по левой стороне блока
Кнопки вкладок делаете с псевдоэлементами, красите с прозрачностью в зависимости от статуса "активная\неактивная" и сдвигаете друг на друга внешним отступом (отрицательный margin)

Совет: смотрите как сделаны слои в макете, очень часто можно определиться, как сделать тот или иной эффект - просто изучив макет

Comments

[Максим]

я хотел уточнить - слой : это какой то тег ?

[ⓒⓢⓢ]

Максим Ленский, слой - нет, это не тег, - это слой фона. Фон из нескольких слоёв

А я надеялся, что будет понятно расписано, ...
Кто не знает, может почитать о слоях наложения в документации
https://developer.mozilla.org/ru/docs/Web/CSS/back...

[Максим]

ⓒⓢⓢ, понял ..спасибо

[Владислав Линник]

Спасибо за годные советы

[Михаил]

Очень интересный макет
Сможете потом прислать ссылку посмотреть что получилось ? :)

[Владислав Линник]

Михаил, Я не был уверен в этом макете, поэтому отказался от него.
Залил на файлообменник кому интересно https://dropmefiles.com/kc2g5 , доступ на 14 дней

Answer 2

[alex-1917]

мы верстали подобное, в таких хитровыпупыренных макетах главное понять, где вы, кто вы и где дизайнер и кто он такой)),
после понимания приходит верное решение.
мы обошлись ОДНИМ png-спрайтом весом в 12кБ
не модно, не стильно, не молодежно
ЗАТО:
работает
железобетонно
проект оплачен

Answer 3

[Михаил]

можно вот так попробовать
css transform: skew
поиграть с параметрами и т.д.

https://codepen.io/mk3mk/pen/OeEmze