Можно на absolute со значением высоты — calc(100% - <высота большой точки + отступ>).
Можете и без него, тогда на flex'e с двумя колонками. В колонке, где точки — тоже flex.
Блоки большой точки и полоски с точками — псевдоэлементы, если не нужно на них вешать действия по клику.
Пример круглых точек на градиенте:
Почему градиент, а не border?
Градиент более равномерно (одинаково) рендерится в разных браузерах и ОС, чем border + гораздо больше контроля (размер, расстояние).
VegasChickiChicki, так делать — плохо, LOL. Где-то случайно добавили такой класс (который должен быть модификатором), забыли про наследование — и всё поломали.
Ну а если вам так нужна именно маска, то, здравствуйте, вам опять нужно нарисовать SVG/PNG-файл с ней. Только учтите, что такие маски не адаптивны нормально.
Проще, как и написал автор ответа, сделать SVG и вставить его разметку в документ.
Макет, созданный в то или иной программе, нужно открывать в той программе, в которой он создан. В противном случае, конвертация туда-сюда может привести к сильной потере информации.
Figma, Zeplin, Adobe XD — они есть на Windows, в чём проблема? Какой макет пришёл — там и открывайте. Если пришёл макет Sketch, а вы на Windows — то страдайте. Либо открывайте в Figma и т. п. Но в этом случае, гарантии того, что вы увидите картину, как она должна быть, — нет.
secondseptember, анимация важна. Анимация должна служить не простой декорацией, а инструментом концентрации внимания на том или ином элементе/переходе. Хорошая штука, чтобы визуально связывать разные экраны, выдвижные панели и т. п.
Иногда анимации излишни и неуместны, например, в дизайне насыщенных элементами управления программах а-ля Photoshop. Представьте, что там все кнопки внезапно будут не резко, как сейчас, а плавно анимированы — ой как это отвлекать будет.
secondseptember, а, кстати, в итоге не пользовался ни разу нормально Adobe XD. Там делали взаимодействия и анимации? Я просто не знаб, какой у него функционал касательно этого.
Пользуюсь для дизайна — Figma, Framer X (взаимодействия) и изредка Sketch. Для растра — Photoshop. Для векторной графики — Inkscape, Illustrator и Boxy SVG (для web хорошая штука, но функционал урезан).
sim3x, научится-научится человек работать малыми средствами. Обычно как раз делают статику, а потом уже в After Effects добавляют это всё. То есть, макет статический есть практически всегда.
sim3x, это работает для небольших групп, стартапов и т. д. Просто в крупных компаниях так не устроено: дизайн делают отдельные подразделения. 99% того, что они делают, не доходит до реализации даже в одной строчке кода. Только после кучи согласований и одобрений свыше (аминь) начинают писать код.
Так, работающий в Google знакомый дизайнер за 4 года ни разу не пообщался с разработчиками напрямую, а видел реализации своих трудов в коде по факту.
Если человек будет уметь делать такие вещи — это, повторюсь, только плюс. Это хороший навык.
Согласен с тем, что будет отлично, если человеку удастся поработать вплотную с хорошим разработчиком, который будет реализовать и говорить, что сделать нельзя, а что сделать долго и невыгодно — это очень важный навык.
Если внутри небольшой группы будет классное взаимопонимание между разными специалистами, там можно пропускать целые пласты работы презентативного характера, ибо все будут понимать, что конкретно они хотят друг от друга.
secondseptember, к сожалению, я не смогу этого сделать, так как это требует большое количество времени, примеров и т. д.
Первый совет — начните с копирования простых и надёжных приёмов подачи информации. Почитайте доп. вот эту книгу:
Там много хороших практик описывается, которые можно применить. Отличная теория композиции и сетки. Но не стоит забывать, что там описаны вещи недвижимые, а web в текущем виде требует адаптивность. Изучайте примеры крупных компаний, их сайтов, приложений — и копируйте. Понимание придёт.
Спрашивайте разных людей, как им ваш дизайн, удобен, понятен ли он. Порой нечто красивое совершенно неудобно. Функционально-утилитарную часть дизайна из сайтов и приложений удалить невозможно. Функционал ставят выше в приоритете, чем декоративность и красоту как таковые. И это правильно. От этого выигрывает бизнес, а вы получаете деньги за отличную работу.
Почитайте, что такое дизайн-система и что такое компонентный подход — это упростит, сформирует и нормализует вашу работу, а так же упростит ваше общение с разработчиками.
~ ~ ~ ~ ~
А можете ничего не читать, кстати, а идти по наитию какое-то время. И, возможно, у вас всё будет отлично получатся. Вот это был мой случай. Но рано или поздно теоретические знания вам всё равно понадобятся, ибо они основа профессионального роста и коммуникаций.
sim3x, вы снова хотите спорить о том, что конкретно вы считаете ненужным.
В отрасли это используется, значит, отрасли это нужно. Статистические макеты тоже никуда не уходят. Но если надо сделать качественную визуализацию взаимодействий — тут уже только такие вещи подходят. Всё зависит от уровня проработки того, что делается.
Я тоже, например, не буду делать такое для проекта с бюджетом 2 тысячи долл. Или для проекта, где нет сложных интеракций. Там такое в 99.999% случаев излишне.
Человек учится делать что-то, что даст ему очков в будущем, — это хорошо.
Update. Ай, тьфу.