Сложных стили для списков со встроенными шрифтами и динамическим содержимым
31 августа 2018 | Опубликовано в css | 1 Комментарий »
Списки — хороший способ упорядочить контент, сделать его читабильнее, понятнее и разбавить текстовую верстку. Но не каждый список справится с этой задачей. Давайте рассмотрим, как можно создать сложные интересно выглядящие списки.
Специальные символы
У большинства шрифтов есть много дополнительных символов, намного больше, чем только алфавит, цифры и стандартные символы. Например, шрифт Libertad, созданный TipoType, относится именно к таким шрифтам и имеет дополнительные символы в кружках:
По умолчанию нумерованные списки используют тот же шрифт для номеров пунктов списка, что и для самого списка, а для отображения специальных символов вместо стандартных цифр нужно отключить стили по умолчанию для нумерованных списков:
ol { list-style-type: none; }
После этого заменим обычные цифры специальными из шрифта и зададим их расположение:
ol li:before { position: absolute; margin-left: -2.7rem; margin-top: -.7rem; font-size: 2rem; font-weight: 100; }
Пример ниже — демонстрация с сайта CodePen — использует несколько другой код CSS и другие специальные символы цифр:
В отличие от другого примера создания нумерованных списков, в этом случае не получится использовать счетчик, так что каждому элементу пункта списка задается значение, которое соответствует нужному специальному символу. Обратите внимание, что указывается не запись символа в формате Unicode, которая видна в таблице символов этого шрифта, например, для единицы в кружке это U+2460, а экранированная обратной косой чертой, т. е., \2460:
ol li:nth-child(1):before { content: "\2460"; } ol li:nth-child(2):before { content: "\2461"; } ol li:nth-child(3):before { content: "\2462"; }
Вот еще один пример использования такой записи:
Одно из ограничений такого подхода — список с подобными стилями не может состоять из более чем девяти пунктов, так как большинство шрифтов с дополнительными символами содержит только девять чисел в кружках. Но очень длинные списки встречаются не так часто, и в любом случае для них нужен другой метод.
Пункты со стрелками
Подобный способ используется и для ненумерованных списков и списков определений:
ul { list-style-type: none; } ul li:before { position: absolute; margin-left: -2.5rem; content: "\2192"; } dt { margin-left: 2.5rem; } dt:before { position: absolute; margin-left: -2.5rem; content: "\2192"; } dd { margin-left:6rem; }
Эти стили для ненумерованного списка и определений терминов добавляют стрелки из шрифта Libertad, подобные стрелкам элемента HTML → :
Примеры подобных списков встречаются очень часто, и существует огромное количество других вариантов оформления.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- Футуризм в иллюстрации
193
31 августа 2018 в 12:38
ммм, а что если так:
ul {counter-reset: point}
ul li {content: counter (point); counter-increment: point 1}
Ответить