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

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

Screenshot-1.png

Заранее благодарен за помощь
  • Вопрос задан
  • 1701 просмотр
Решения вопроса 1
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
Весь блок (например, section) имеет фон в 3 слоя (слой не путать с блоком)
1 слой покрываете линейным градиентом (linear-gradient)
2 слой покрываете радиальным градиентом (radial-gradient) с бирюзовым цветом (отблески)
3 слой наносите текстуру в виде шестиугольника

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

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

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

Совет: смотрите как сделаны слои в макете, очень часто можно определиться, как сделать тот или иной эффект - просто изучив макет
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
alex-1917
@alex-1917
мы верстали подобное, в таких хитровыпупыренных макетах главное понять, где вы, кто вы и где дизайнер и кто он такой)),
после понимания приходит верное решение.
мы обошлись ОДНИМ png-спрайтом весом в 12кБ
не модно, не стильно, не молодежно
ЗАТО:
работает
железобетонно
проект оплачен
Ответ написан
mk3mk
@mk3mk
занимаюсь вёрсткой (иногда)
можно вот так попробовать
css transform: skew
поиграть с параметрами и т.д.

https://codepen.io/mk3mk/pen/OeEmze
Ответ написан
Ваш ответ на вопрос

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

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