Задание стилей для упорядоченных списков всегда являлось достаточно трудной задачей. Для использования своих стилей надо удалить стили браузера по умолчанию и добавить указатели на элементы списка, чтобы использовать нужные наборы правил.

В данном уроке описан способ придания упорядоченным спискам стильного вида с использованием семантического подхода.

Разметка HTML
Код HTML прост и нагляден:

<ol class="rounded-list">
    <li><a href="">Пункт списка</a></li>
    <li><a href="">Пункт списка</a></li>
    <li><a href="">Пункт списка</a>
        <ol>
            <li><a href="">Подпункт списка</a></li>
            <li><a href="">Подпункт списка</a></li>
            <li><a href="">Подпункт списка</a></li>
        </ol>
    </li>
    <li><a href="">Пункт списка</a></li>
    <li><a href="">Пункт списка</a></li>                       
</ol>

CSS
Данная техника использует автоматическое нумерование. По существу, оно базируется на двух свойствах CSS 2.1: counter-reset (инициализация счетчика) и counter-increment (инкремент счетчика). Свойство counter-increment будет использоваться с содержанием, генерируемым CSS (псевдо-элемент).

ol{
        counter-reset: li; /* Инициализация счетчика */
        list-style: none; /* Удаляем нумерацию по умолчанию */
        *list-style: decimal; /* Для IE6/7 используем нумерацию по умолчанию */
        font: 15px 'trebuchet MS', 'lucida sans';
        padding: 0;
        margin-bottom: 4em;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
 
ol ol{
        margin: 0 0 0 2em; /* Добавляем небольшое поле слева для вложенного списка */
}

Нумерация в круглых формах
Стиль для упорядоченного списка

.rounded-list a{
        position: relative;
        display: block;
        padding: .4em .4em .4em 2em;
        *padding: .4em;
        margin: .5em 0;
        background: #ddd;
        color: #444;
        text-decoration: none;
        border-radius: .3em;
        transition: all .3s ease-out;
}
 
.rounded-list a:hover{
        background: #eee;
}
 
.rounded-list a:hover:before{
    transform: rotate(360deg);
}
 
.rounded-list a:before{
        content: counter(li);
        counter-increment: li;
        position: absolute;
        left: -1.3em;
        top: 50%;
        margin-top: -1.3em;
        background: #87ceeb;
        height: 2em;
        width: 2em;
        line-height: 2em;
        border: .3em solid #fff;
        text-align: center;
        font-weight: bold;
        border-radius: 2em;
        transition: all .3s ease-out;
}

Нумерация в квадратных формах

.rectangle-list a{
        position: relative;
        display: block;
        padding: .4em .4em .4em .8em;
        *padding: .4em;
        margin: .5em 0 .5em 2.5em;
        background: #ddd;
        color: #444;
        text-decoration: none;
        transition: all .3s ease-out;
}
 
.rectangle-list a:hover{
        background: #eee;
}      
 
.rectangle-list a:before{
        content: counter(li);
        counter-increment: li;
        position: absolute;
        left: -2.5em;
        top: 50%;
        margin-top: -1em;
        background: #fa8072;
        height: 2em;
        width: 2em;
        line-height: 2em;
        text-align: center;
        font-weight: bold;
}
 
.rectangle-list a:after{
        position: absolute;
        content: '';
        border: .5em solid transparent;
        left: -1em;
        top: 50%;
        margin-top: -.5em;
        transition: all .3s ease-out;
}
 
.rectangle-list a:hover:after{
        left: -.5em;
        border-left-color: #fa8072;
}

Небольшой бонус
В демонстрации используется анимация для номеров. Однако, в настоящее время только FireFox поддерживает анимацию в псевдо-элементах.

Добавлено: 27 Апреля 2018 19:15:50 Добавил: Андрей Ковальчук Нравится 0

Добавить