Нумерованные списки на Blogger
Сегодня предлагаю вам посмотреть коды оформления нумерованных списков.
Возможно какой нибудь вам понравится.
На blogger стоит самое обычное оформление – цифры. Я предлагаю их немного украсить.
Вставлять все коды нужно в шаблон блога перед тегом ]]></b:skin>.
В дальнейшем, если в статье будет список, оформляем его нажав на значок списка, как на скриншоте:
color: #000000 – цвет цифры
color: #4d5645 – цвет квадратика
Внешне список выглядит так:
#8b969e – рамка прямоугольника
#e6e6fa – фон прямоугольника
#337AB7 – рамка квадрата с цифрой
#9389cc – цвет цифры
#F7FAFD – фон квадрата с цифрой
#bdbdf2 – фон квадрата с цифрой, при наведении курсора
#ffffff – цвет цифры, при наведении курсора
#ffffff – цвет фона прямоугольника, при наведении курсора
#f5f5f5 – фон списка
#b1b3b1 – полосы и квадратик с цифрой в спокойном состоянии
#1e4acd – полосы и квадратик с цифрой при наведении курсора
white – цвет цифры
Verdana – шрифт
#dbdbdb – фон полос списка
#007d34 – цвет фона с цифрой
white – цвет цифры
#CADFCF – рамка списка
#FEFEFE – фон списка
#231F20 – цвет текста
14px – размер текста
#154d0b – цвет цифры
#CADFCF – цвет круга с цифрой
Коды оформления списков
1 код
.post ol {
padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #4d5645;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}
.post ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #000000;
position: relative;
}
.post ol li:before {
margin-bottom: 6px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #4d5645;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}
Меняем в коде:padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #4d5645;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}
.post ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #000000;
position: relative;
}
.post ol li:before {
margin-bottom: 6px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #4d5645;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}
color: #000000 – цвет цифры
color: #4d5645 – цвет квадратика
Внешне список выглядит так:
Код 2
.post ol {
margin: 20px 0 0;
padding:0;
list-style-type: none;
position: relative;
counter-reset: li;
line-height: 2.5;
}
.post ol li {
border: 2px solid
#91b3f2;
background: #e6e6fa;
position: relative;
margin-bottom: 20px;
padding: 2px 10px;
}
.post ol li:hover {
z-index: 1;
}
.post ol li:before {
border: 2px solid #337AB7;
top: -10px;
padding: 2px 6px;
font-size: 11px;
font-weight: bold;
color: #9389cc;
background: #F7FAFD;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.post ol li:hover:before {
background: #bdbdf2;
color: #ffffff;
}
.post ol li:after {
content: "";
position: absolute;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #ffffff;
height: 100%;
left: 0%;
top: 0;
width: 0;
}
.post ol li:hover:after {
width: 100%;
}
Меняем цвета на свои.margin: 20px 0 0;
padding:0;
list-style-type: none;
position: relative;
counter-reset: li;
line-height: 2.5;
}
.post ol li {
border: 2px solid
#91b3f2;
background: #e6e6fa;
position: relative;
margin-bottom: 20px;
padding: 2px 10px;
}
.post ol li:hover {
z-index: 1;
}
.post ol li:before {
border: 2px solid #337AB7;
top: -10px;
padding: 2px 6px;
font-size: 11px;
font-weight: bold;
color: #9389cc;
background: #F7FAFD;
counter-increment: li;
content: counter(li);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.post ol li:hover:before {
background: #bdbdf2;
color: #ffffff;
}
.post ol li:after {
content: "";
position: absolute;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transition-property: width;
transition-property: width;
z-index: -1;
background: #ffffff;
height: 100%;
left: 0%;
top: 0;
width: 0;
}
.post ol li:hover:after {
width: 100%;
}
#8b969e – рамка прямоугольника
#e6e6fa – фон прямоугольника
#337AB7 – рамка квадрата с цифрой
#9389cc – цвет цифры
#F7FAFD – фон квадрата с цифрой
#bdbdf2 – фон квадрата с цифрой, при наведении курсора
#ffffff – цвет цифры, при наведении курсора
#ffffff – цвет фона прямоугольника, при наведении курсора
Код 3
.post ol {
margin: 0;
counter-reset: li;
list-style: none;
background:#f5f5f5;
padding: 2px;
line-height: 2.5;
}
.post ol li {
position: relative;
margin: 0 0 10px 2em;
padding: 4px 8px;
border-top: 2px solid #b1b3b1;
transition: .3s linear;
}
.post ol li:last-child {margin-bottom: 0;}
.post ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
width: 2em;
box-sizing: border-box;
margin-right: 8px;
border-top: 2px solid #b1b3b1;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom: 0px solid transparent;
background: #b1b3b1;
color: white;
font-weight: bold;
text-align: center;
transition: .3s linear;
}
.post ol li:hover {border-top: 2px solid #1e4acd;}
.post ol li:hover:before {
border: 2px solid #1e4acd;
background: #1e4acd;
}
Меняем в коде:margin: 0;
counter-reset: li;
list-style: none;
background:#f5f5f5;
padding: 2px;
line-height: 2.5;
}
.post ol li {
position: relative;
margin: 0 0 10px 2em;
padding: 4px 8px;
border-top: 2px solid #b1b3b1;
transition: .3s linear;
}
.post ol li:last-child {margin-bottom: 0;}
.post ol li:before {
content: counter(li);
counter-increment: li;
position: absolute;
top: -2px;
left: -2em;
width: 2em;
box-sizing: border-box;
margin-right: 8px;
border-top: 2px solid #b1b3b1;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom: 0px solid transparent;
background: #b1b3b1;
color: white;
font-weight: bold;
text-align: center;
transition: .3s linear;
}
.post ol li:hover {border-top: 2px solid #1e4acd;}
.post ol li:hover:before {
border: 2px solid #1e4acd;
background: #1e4acd;
}
#f5f5f5 – фон списка
#b1b3b1 – полосы и квадратик с цифрой в спокойном состоянии
#1e4acd – полосы и квадратик с цифрой при наведении курсора
white – цвет цифры
Код 4
.post ol {
margin-left: 0;
list-style: none;
counter-reset: li;
font-family: Verdana;
line-height: 2.5;
}
.post ol li {
padding: 10px 0;
position: relative;
left: 0em;
margin-bottom: 1.75em;
padding-left: 1em;
background: #dbdbdb;
}
.post ol li:before {
padding: 0px 0;
position: absolute;
top: 0;
bottom: 0;
left: -2em;
width: 1.875em;
text-align: center;
color: white;
font-weight: bold;
background: #007d34;
border-bottom-left-radius: 70em;
border-top-left-radius: 70em;
counter-increment: li;
content: counter(li);
}
Можно поменять:margin-left: 0;
list-style: none;
counter-reset: li;
font-family: Verdana;
line-height: 2.5;
}
.post ol li {
padding: 10px 0;
position: relative;
left: 0em;
margin-bottom: 1.75em;
padding-left: 1em;
background: #dbdbdb;
}
.post ol li:before {
padding: 0px 0;
position: absolute;
top: 0;
bottom: 0;
left: -2em;
width: 1.875em;
text-align: center;
color: white;
font-weight: bold;
background: #007d34;
border-bottom-left-radius: 70em;
border-top-left-radius: 70em;
counter-increment: li;
content: counter(li);
}
Verdana – шрифт
#dbdbdb – фон полос списка
#007d34 – цвет фона с цифрой
white – цвет цифры
Код 5
.post ol {
margin-left: 0;
list-style: none;
counter-reset: li;
line-height: 2.5;
}
.post ol li {
position: relative;
margin-bottom: 1.5em;
border: 3px solid #CADFCF;
padding: 0.6em;
border-radius: 4px;
background: #FEFEFE;
color: #231F20;
font-family: "Trebuchet MS", "Lucida Sans";
}
.post ol li:before {
padding-right: 0.4em;
font-size: 14px;
font-weight: bold;
color: #154d0b;
background: #CADFCF;
border-radius: 50%;
counter-increment: li;
content: counter(li);
}
Можно изменить в коде:margin-left: 0;
list-style: none;
counter-reset: li;
line-height: 2.5;
}
.post ol li {
position: relative;
margin-bottom: 1.5em;
border: 3px solid #CADFCF;
padding: 0.6em;
border-radius: 4px;
background: #FEFEFE;
color: #231F20;
font-family: "Trebuchet MS", "Lucida Sans";
}
.post ol li:before {
padding-right: 0.4em;
font-size: 14px;
font-weight: bold;
color: #154d0b;
background: #CADFCF;
border-radius: 50%;
counter-increment: li;
content: counter(li);
}
#CADFCF – рамка списка
#FEFEFE – фон списка
#231F20 – цвет текста
14px – размер текста
#154d0b – цвет цифры
#CADFCF – цвет круга с цифрой
Комментарии со спамом удаляются.