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

Question

[freekir]

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



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

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

Да, без JS :)

Comments

[Сергей delphinpro]

Самое простое - background-attachment: fixed. Но, понятно, фон будет визуально смещаться внутри кружнов во время скролла.

[freekir]

Сергей: Мысль понял, спасибо за проявленный интерес )

Answer 1

[devstudent]

использовать цикл less
UPD: дизайнер гений. ЗАЧЕМ нумерации пунктов такой сложный фон. если начальаня и конечная точка градиаента фиксированы, то нужен JS
upd-2: сделайте градиентный фон для ul , для li белый, для маркеров прозрачный. должно получиться )))

Comments

[freekir]

А просто вот если закрыли в комнате, отключили интернет, есть только блокнот и браузер ) Нету не чего кроме CSS HTML, с ними двумя динамики не получить?
Но браузер самый новый, не ночная сборка конечно, но тоже много что умеет :)

[devstudent]

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

[freekir]

devstudent: Ну в ручную это самое простое, это понятно, что так можно, думал может быть я что-то упустил из возможностей новой спецификации.

В любом случае спасибо за ответ.

[devstudent]

c2n.me/3LjDIx5 вот есть у меня подобное. вот код, если интересно less: .generate-background(15);

.generate-background(@n, @i: 1) when (@i =< @n) {
.parent>li {
&:nth-of-type(@{i}){
background: darken(@color_brand, 3%*@i);
}
}
.generate-background(@n, (@i + 1));
}

[freekir]

devstudent: Спасибо, сохраню.

Answer 2

[monochromer]

Можно прибегнуть к хаку - сделать достаточно большой белый box-shadow:
box-shadow: 0 0 0 9999px #fff;
А градиент наложить на весь список. Пунктам меню задать обрезку overflow: hidden;.

пример - https://codepen.io/monochromer/pen/VWWBgp?editors=1100

Comments

[ProTreo]

Добавил в коллекцию, респект.

[freekir]

Это то, что я как раз спрашивал, спасибо большое.

[Виолетта Морозова]

Идеальное решение!
Вот только у меня вопрос возник: многие разработчики, в том числе опытные, вычисляют border-radius, чтобы сделать круг. Почему? Ведь можно поставить значение 50% и не задумываться о размерах круга вообще. Есть какой-то тайный замысел в использовании пикселей для такой задачи? Может я чего-то не знаю...

[monochromer]

Виолетта Морозова: Проценты для border-radius идеально подходят для создания круга, при этом размеры, как правило, известны. Бывают случаи (см. пример ниже), когда размеры не известны (вернее, мы сами не хотим хардкодить) и нужно избежать некоторых сайд-эффектов.

В общем, вместо тысячи слов - https://jsbin.com/fujugux/edit?html,css,output

[Виолетта Морозова]

monochromer: т.е. это тоже своеобразный хак для border-radius?

[monochromer]

Виолетта Морозова: можно назвать и хаком. Но как еще можно сделать несколько кнопок с закруглениями разной высоты, при этом написать как можно меньше кода?

[Виолетта Морозова]

monochromer: не уверена, что знаю. Я ничего не имею против вашего решения, мне оно даже нравится =)

Answer 3

[Дима Паутов]

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

Лучший, на мой взгляд способ - это через nth-child добавлять фоновый цвет. Но тут есть нюанс, придётся писать много селекторов с цветами. Я бы просто сделал просто 5-10 цветов. Css не призван решать такие задачи дизайнера, увы.

Comments

[freekir]

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

[Иван]

freekir: изнасилуйте дизайнера и в лес отвезите,вам верстальщики спасибо скажут

Answer 4

[nonlux]

Ребят, чего мучаетесь?
1. Берем пипетку. Цвет у самого маркера один. У следующего темнее но он один ( не градиент). Просто визуально так выглядит.
Ну а дальше по решению Дима Турков
И усе профит.
+ не пишем то, не нужно.
Т.е не

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

А просто сверстать нужное количество.

Comments

[freekir]

Да, уже сделал по решению Дима Турков

Answer 5

[mletov]

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

Comments

[freekir]

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

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

Надеюь понятно мысль донес.

[mletov]

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

Только жестко зашитые классы или автоматизация через LESS, как предложили выше.