Создание маркировки для списков с использованием изображений
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
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Бесплатный весенний вектор
-
Сайты, посвященные свадьбам
-
Милый графический дизайн от Клаудии Бордин
-
Красивый текстовый 3D-эффект в Adobe Photoshop
-
Вектор в стиле ретро для вашего дизайна
-
Монохромный веб-дизайн
-
Японский стиль в изобразительном искусстве
-
Тонированные изображения с помощью множественных фоновых изображений
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58