Как сверстать список у которого маркеры в виде градиента?

Всем спасибо за ответы! Если кто-то еще хочет высказаться, то буду рад. Что хотел я узнал.

1bad7eeadc99482abff235d6b548661c.png

Как сверстать такое, чтобы кол-во пунктов было не важно, но всегда было от темно синего к светлому.

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

Да, без JS :)
  • Вопрос задан
  • 1123 просмотра
Решения вопроса 3
@devstudent
frontend-developer
использовать цикл less
UPD: дизайнер гений. ЗАЧЕМ нумерации пунктов такой сложный фон. если начальаня и конечная точка градиаента фиксированы, то нужен JS
upd-2: сделайте градиентный фон для ul , для li белый, для маркеров прозрачный. должно получиться )))
Ответ написан
monochromer
@monochromer
DIVeloper
Можно прибегнуть к хаку - сделать достаточно большой белый box-shadow:
box-shadow: 0 0 0 9999px #fff;
А градиент наложить на весь список. Пунктам меню задать обрезку overflow: hidden;.

пример - https://codepen.io/monochromer/pen/VWWBgp?editors=1100
Ответ написан
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
По вашей методитке, вам наврятли поможет, т.к. кол-во текста в блоке может быть очень большим, и градиент будет всё равно виден.

Лучший, на мой взгляд способ - это через nth-child добавлять фоновый цвет. Но тут есть нюанс, придётся писать много селекторов с цветами. Я бы просто сделал просто 5-10 цветов. Css не призван решать такие задачи дизайнера, увы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
nonlux
@nonlux
Ребят, чего мучаетесь?
1. Берем пипетку. Цвет у самого маркера один. У следующего темнее но он один ( не градиент). Просто визуально так выглядит.
Ну а дальше по решению Дима Турков
И усе профит.
+ не пишем то, не нужно.
Т.е не
Как сверстать такое, чтобы кол-во пунктов было не важно

А просто сверстать нужное количество.
Ответ написан
@mletov
Как я понимаю, градиент не бесконечный. Начиная пункта с 4-5 маркеры будут монохромные. Возможно, не стоит мучиться, а просто захардкодить маркеры для первых 3-4 пунктов (nth-child(1), nth-child(2) и пр), а остальные сделать однотонными.
Или идея дизайнера в том, что если расстояние между маркерами разное, то градиент по-разному будет ложиться в зависимости от высоты пункта?
Ответ написан
Ваш ответ на вопрос

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

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