Матвей Земсков

Заметки веб-мастера

Понедельник, 08 сентября 2014 22:06

Замена стандартных маркеров у списка и их стилизация

Оцените материал
(0 голосов)

Ни для кого не секрет, что с помощью CSS свойств list-style можно задать стиль маркеров у маркированного списка. С нумерованными списками не все так просто. Как известно до маркеров в нумерованных списках никак не «доберешься» с помощью правил CSS. Конечно, можно отображать номера элементов в виде римских цифр или букв латинского алфавита (устанавливая различные значения атрибута type элемента ol или значение свойства list-style-type), но увеличить их размер или поменять цвет стандартными правилами CSS невозможно. В связи с этим, речь в этой заметке пойдет об оформлении нумерованных списков, а именно о замене стандартных маркеров у элементов таких списков.

При стилизации нумерованных списков разработчики поступают следующим образом:

  • скрывают маркеры по-умолчанию
  • инициализируют новый счетчик
  • размещают его значение в псевдоэлементе :before у каждого элемента списка.
  • значение счетчика рассчитывается для каждого элемента списка

В итоге получается следующий CSS-код:

CSS

	ol {counter-reset: li;} /*ID счетчика*/
	ol li {list-style-type:none;} /*скрываем маркеры по-умолчанию*/
	ol > li:before {
		content: counter(li, decimal); /*вставляем значение счетчика в :before*/
		counter-increment: li; /*рассчитываем значение счетчика*/
	}

Остальные стили, которые применяются к элементам списка, зависят от дизайн-макета сайта.

стилизация маркеров нумерованных списков

Например, если список в макете выглядит как на рисунке выше, то нужно будет применить следующие стили:

CSS

li{border-bottom: 1px solid #f6d000; float: left; font-size: 18px; line-height: 30px; margin: 0 50px 25px; min-height: 110px; padding-top: 70px; position: relative; width: 400px; z-index: 10; color:#777;}
li:before {bottom: 0; color: #f6d000; font-size: 150px; font-weight: 100; line-height: 189px; position: absolute; right: -12px; z-index: -1;}

Перечисленные в заметке CSS-правила (counter-reset, content, counter-increment) поддерживаются всеми современными браузерами. В IE работает начиная с восьмой версии.

Демо-страница с примером из заметки

Прочитано 3149 раз

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


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

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: