Создание нумерованного списка всегда пригодится на сайте, ведь по своему характеру и возможностям оно также актуальна, как другие элементы. Ведь в нем можно расположить ключевые слова или описание, где поставить под нумерацию. что на первом месте стоит такое название материала, на второй и так далее. Очень удобная форма для того, чтоб добавить в описание, где не нужно вписывать места, а просто показать на списках.
В нашей теме списки предстанут еще на градиентах, что сильно отличает их от других, так как могут с одной стороны начаться с одного оттенка, а вот закончится другим. Так, что не чего сложного нет, все создано на чистом стиле CSS. Плюс состоит в том, сто вам не нужно выводить стилистику, так как они здесь по минимум, ведь поставлены градиенты, где все оттенки можно сложить в один ряд и по распорядку.
Так изначально выглядит на demo странице:
Здесь уже самостоятельно поменял всю палитру цвета:
Начинаем:
HTML
Код
<ol>
<li>ZorNet - портал для вебмастера</li>
<li>ZorNet - с описанием</li>
<li>ZorNet - кратко и по теме</li>
<li>ZorNet - аналогично пишем</li>
</ol>
CSS
Код
ol {
list-style: none;
counter-reset: li;
max-width: 298px
}
li {
margin-bottom: 3px;
position: relative;
background: linear-gradient(90deg, #90136a, #1c405f);
line-height: 38px;
padding: 0 7px;
color: #efe9e9;
border-radius: 3px;
}
li:after {
counter-increment: li;
content: counters(li,".") ". ";
margin-left: 8px;
position: absolute;
right: 8px;
color: #f5cfd4;
}
Как можно заметить, что веб разработчик может поставить его на любой блог, и также немного похоже на вертикальное меню своей стилистикой.
Демонстрация
