» » Стили оформления списков на Blogger

Стили оформления списков на Blogger

Я много писала об оформлении списков, как нумерованных, так и маркированных. Но вновь нахожу в интернете яркие, необычные или, наоборот, скромные, но с изюминкой стили оформления списков. Вот и сегодня, вновь оформляем списки. Почитать о других стилях:

Цифры с наклоном

Цифры с наклоном
Обычный вид оформления с небольшой изюминкой — наклон цифр. Добавляем код в шаблон, выше тега ]]></b:skin>.
Цвет можно поменять на свой.
Цвет круга в коде выделила синим
Цвет цифр — красным
Код:
ol {
  max-width: 350px;
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
line-height: 32px;
}
ol li {
  margin: 0 0 0.5 rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol li::before {
  content: counter(my-awesome-counter);
  color: #ffffff;
  font-size: 1.8 rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background: sienna;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}

Оформление с линией

У второго кода оформления списков имеется линия отбивки. Так же можно менять цвет круга. К тому же можно сделать квадратные маркеры или с закруглёнными углами.
Добавляем код в шаблон, выше тега ]]></b:skin>.
Красным в коде выделила цвет отбивки
Синим — ширина полосы отбивки
Зелёным — цвет маркера
Оранжевым — ширину круга
Голубым — процент скругления углов:
50% круглый 
0% - квадратный
от 5% до 45% сила скругление углов
ol {
list-style-type: none; 
counter-reset: num;
margin: 0 0 0 60px;
padding: 15px 0 5px 0;
font-size: 16px;
position: relative;
}
ol li {
position: relative;
margin: 0 0 0 0;
padding: 0 0 10px 0;
line-height: 1.9;
}
ol li:before {
content: counter(num); 
counter-increment: num;
display: inline-block;
position: absolute;
top: 0;
left: -55px;
width: 28px;
height: 28px;
background: #fff;
color: #000;
text-align: center;
line-height: 28x;
font-size: 18px;
border-radius: 0%;
border: 2px solid #3232ec;
}
ol:before {
content: ''; 
position: absolute;
top: 15px;
bottom: 15px;
left: -15px;
width: 1px;
border-left: 2px solid #3232ec;
}

Ваши комментарии:

Комментарии со спамом удаляются.