Стили CSS3 для упорядоченных списков

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

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

 

Разметка 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 поддерживает анимацию в псевдо-элементах.

 

Обратная совместимость

Внешний вид в старых браузерах сохраняется вполне пристойным:


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fL238N77aiA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Стили CSS3 для упорядоченных списков | | 2012-06-19 11:59:57 | | Статьи Web-мастеру | | Задание стилей для упорядоченных списков всегда являлось достаточно трудной задачей. Для использования своих стилей надо удалить стили браузера по умолчанию и добавить  указатели на элементы списка, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: