Оформление списков на Blogger

Сегодня продолжаем тему оформления списков на блоггер. Основа для кодов взята на сайте https://html5book.ru/, найти там можно много интересных идей. А так же уроков. Итак, что бы списки выглядели красиво, нужно в шаблоне перед ]]></b:skin> вставить один из предложенных кодов.

Коды для оформления списков

Код 1 

Круг с цифрой вращается.

.post ol {
counter-reset: li;
list-style: none;
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
line-height: 2.5;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #FFF5EE;
color: #020202;
text-decoration: none;
border-radius: .3em;
transition: .3s ease-out;
}
.post ol li:hover {background: #fcc4c4;}
.post ol li:hover:before {transform: rotate(360deg);}
.post ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.0em;
top: 50%;
margin-top: -1.3em;
background: #FF0000;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid tomato;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Изменений в коде можно сделать много, я отмечу несколько:
14px – размер шрифта
#FFF5EE – цвет фона списка
#020202 – цвет шрифта
tomato – цвет рамки круга с цифрой
#fcc4c4 – фон списка при наведении курсора
#FF0000 – фон круга
2em – если заменить значение на 0, то вместо круга будет квадрат.

Код 2 

При наведении указателя на цифру, появляется треугольник, направленный на пункт списка.

.post ol {
counter-reset: li;
list-style: none;
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #E6E6FA;
color: #4B0082;
text-decoration: none;
transition: all .3s ease-out;
}
.post ol li:hover {background: #bdbdf2;}     
.post ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9370db;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.post ol li:hover:after {
left: -.5em;
border-left-color: #9370db;
}

Меняем в коде:
14px – размер шрифта
#E6E6FA – цвет фона
#4B0082 – цвет текста и цифр
#9370db – цвет фона квадрата с цифрами
#bdbdf2 – цвет фона списка при наведении курсора
#9370db – цвет треугольника у квадрата с цифрами

Код 3 

Меняется цвет чисел и увеличивается квадрат с числами.

@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
.post ol {
  list-style: none;
  margin: 0 auto;
  width: 800px;
  counter-reset: li;
line-height: 2.5;
}
.post ol li {
  border-bottom: dashed 1px #9400d3;
  margin-top: 10px;
  box-shadow: 0 1px 4px rgba(213, 200, 232, 1), 0 0 40px rgba(171, 142, 212, 1) inset;
  padding: 5px;
}
.post ol li {
  text-decoration: none;
  padding: 10px;
  display: block;
  line-height: 30px;
  color: #000000;
  font-family: 'EB Garamond', serif;
  font-size: 20px;
}
.post ol li:before {
  display: inline-block;
  content: counter(li);
  counter-increment: li;
  height: 30px;
  width: 30px;
  text-align: center;
  border: solid 1px #dda0dd;
  margin-right: 20px;
  box-shadow: 0 1px 4px rgba(213, 200, 232, 1), 0 0 30px rgba(171, 142, 212, 1) inset;
  font-family: 'Fredericka the Great', cursive;
  font-size: 24px;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.post ol li:hover:before {
  color:#9400d3;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Изменить можно:
800px – можно уменьшить или увеличить список в ширину
#9400d3 – пунктирная полоса
#000000 – цвет текста и номеров списка
#dda0dd – окантовка квадрата с цифрой
#9400d3 – цвет цифры при наведении курсора
box-shadow: 0 1px 4px rgba(213, 200, 232, 1), 0 0 40px rgba(171, 142, 212, 1) inset; - можно поменять цвет градиента фона списка
box-shadow: 0 1px 4px rgba(213, 200, 232, 1), 0 0 40px rgba(171, 142, 212, 1) inset; - можно поменять цвет тени квадратика с цифрой
Менять цвет удобно с помощью онлайн сервиса https://colorscheme.ru/color-converter.html

1. Нажимаем на цветной квадрат
2. Выбираем нужный цвет
3. Выбираем кодировку цвета, в нашем случае RGBA
4. Получившиеся цифры переносим в код

А получается в 3 коде вот такое оформление:

4 код 

Прыгающие кольца, основа кода взята с сайта https://atuin.ru/blog/. Здесь так же можно найти много интересной информации.

.post ol {
    padding:0;
    list-style: none;
    counter-reset: li;
    line-height: 2.5;
} 
.post ol li {
    position: relative;
    padding:12px 20px 20px 28px;
    margin-left: 40px;
    transition-duration: 0.3s;
}
.post ol li:before {
    border: 6px solid transparent;
    line-height: 30px;
    position: absolute;
    top: 0;
    left:-30px;
    width:42px;
    text-align:center;
    font-size: 13px;
    font-weight: bold;
    color: #FF4500;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
    }
.post ol li:hover:before {
    color: #FF6347; 
}
.post ol li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #ff4d00;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
.post ol li:hover:after {
    animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
} 

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.3, 1.3, 1.3);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

Меняем:
#FF4500 – цвет цифр
#FF6347 – цвет круга
#ff4d00 – цвет круга при наведении мышки

5 код 

При наведении курсора на строку списка, меняется цвет и появляется круг.

.post ol {
    padding:0;
    list-style: none;
    counter-reset: li;
    line-height: 2.5;
} 
.post ol li {
    position: relative;
    border-left: 4px solid #006400;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 80px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.post ol li:before {
    line-height: 32px;
    position: absolute;
    top: 0px;
    left:-80px;
    width:80px;
    text-align:center;
    font-size: 24px;
    font-weight: bold;
    color: #228B22;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}
.post ol li:hover:before {
    color: #9ACD32;
}
.post ol li:after {
    position: absolute;
    top: 26px;
    left: -40px;
    width: 60px;
    height: 60px;
    border: 8px solid #32CD32;
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    pointer-events: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;     
}
.post ol li:hover:after {
    opacity: 0.2;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}    

Изменяем:
#006400 – цвет вертикальной полоски
#228B22 – цвет цифры
#9ACD32 – цвет цифры, при наведении курсора
#32CD32 – цвет появляющегося кольца при наведении указателя