Как стилизовать divs или li, чтобы выглядеть как индикатор выполнения?

Question

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

Я понятия не имею, как сделать такой эффект, и потому, что я не «Не знаю, как это называется, я не смог найти никаких примеров или чего-то еще.

Как я могу сделать что-то наподобие на изображении выше?

Answer 1

это называется Progress Trackers, он похож на навигацию Breadcrumb, но имеет различное поведение и использует.

см. Следующие link, чтобы увидеть примеры и различия между ними.

см. Следующее tutorial, чтобы построить отслеживание прогресса в чистом css.

Answer 2

Вот хорошее место, чтобы начать с моделированием: http://css3button.net/81334

Что вы смотрите на это:

• CSS градиенты для фона: http://css-tricks.com/css3-gradients/

• текстовой тень по тексту

• коробчатого тень набор вставка для легкой детали

• и, возможно, некоторые довольно продвинутый : перед тем и : после стилей для точек: http://css-tricks.com/bubble-point-tooltips-with-css3-jquery/