Пользовательский стиль нумерованного списка CSS

Пользовательский стиль нумерованного списка CSS

От автора: как насчет классического трюка CSS! Это даже и не трюк, поскольку нумерованный список CSS может быть сделан с помощью counter-increment и counter-reset, и это идеально нам подходит. Я просто хотел удостовериться, что вы знаете, как это работает, и у вас есть простые примеры для копирования.

Скажем, все, что вы хотите сделать, это изменить стиль номеров:

Вот пример со страницы CodePen Challenges:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

На днях на Pen появилось такое демо, в которой использованы довольно классные стили:

Сайты рецептов — отличное места для поиска стилей пользовательских списков, поскольку списки этапов — это одна из основных их функций. На сайте Мета Маркиза у него есть забавные варианты. Я взял его CSS и переместил сюда:

Обязательно ознакомьтесь с небольшим изменением медиа-запросов. Конечно же, на сайте рецептов Леи Веру также есть интересная нумерация.

Вот интересная демо-версия Джонатана Снука, которая имеет «временную шкалу» и использует пользовательские счетчики для обозначения каждого раздела:

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

HTML5 и CSS3 с Нуля до Профи

Научись верстать сайты, используя все возможности HTML5 и CSS3, прямо сейчас

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree