Создание маркировки для списков с использованием изображений
25 мая 2018 | Опубликовано в css | Нет комментариев »
Можно уникальным образом украсить списки несколькими способами. Первый и самый лучший вариант — использование рамок и генерируемого содержимого. Но иногда элементы пунктов списка выделяются таким необычным образом, что приходится специально для этого создавать изображение и применять его с помощью свойства list-style-image (изображения стиля списка) или свойства фонового изображения. Так как это оформление будет применяться к каждому элементу пункта списка, то это наиболее подходит для ненумерованных списков.
Наиболее сложная часть в создании изображения, которое будет использоваться для украшения списка, — определение его размеров. Если изображение будет слишком высокое, то оно не сможет быть выровнено относительно связанного с ним элемента пункта списка. Если оно будет слишком большое, то может увеличиться отступ между элементами списками. Можно рекомендовать использовать изображения высотой примерно 32 пикселя, и чтобы низ изображения совпадал с его границей. Это делается потому, что при использовании свойства изображения стиля списка низ изображения будет совпадать с базовой линией текста элемента пункта списка и при использовании этого способа нет возможности изменить расположение изображения.
В графическом редакторе PhotoShop обычное изображение для украшения элементов пунктов списка, увеличенное примерно на 400%, будет выглядеть примерно так:
Здесь есть два варианта. Первый — можно применить изображение как изображение стиля списка для отделки элементов пунктов списка, что автоматически заменит все заданные типы стиля списка. Например, добавим изображение triangle.png, находящееся в папке с изображениями, как ведущий маркер для ненумерованного списка с идентификатором #decorated, используя следующий код:
ul#decorated { list-style-image: url(images/triangle.png); }
Или можно применить изображение как фоновое изображение для каждого элемента пункта списка, отключив повторение и все ранее примененные типы стиля списка:
ul#decorated li { background-image: url(images/triangle.png); background-repeat: no-repeat; list-style-type: none; }
При выборе второго варианта можно изменять положение изображения относительно текста элемента пункта списка, используя свойство расположения фона. Возможно, понадобится использовать внутренний отступ для элемента пункта списка, чтобы перед ним было достаточно пространства для фонового изображения, в зависимости от его расположения.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191