Картинка маркер списка css – Правила CSS для настройки внешнего вида списка на html странице. Свойство list style (type, image, position)

Leave a Comment / Css / By /

Как самому сделать и установить красивые маркеры для списка

В этой статье рассмотрим, 182как вместо цифр, кружочков, и квадратиков в списках, сделать и установить красивые маркеры-изображения.

Между прочем маркеры можно и нарисовать средствами CSS и HTML и о том как это делается вот этот пост, ну а здесь поработаем с изображениями.

Сначала нужно получить картинку маркера.

Можно найти её в интернете, тем у кого есть фотошоп, можно сделать в нём. Я покажу, как сделать маркеры в редакторе Paint, так как он есть во всех Windows по умолчанию.

Картинку можно взять прямо отсюда.

Красивые маркеры для списка

Для этого делаем снимок экрана (нажать клавишу Prt Sc Sys Rd), и открыв Paint, щёлкаем по иконке «Вставить».

Затем выбираем «Выделить — прямоугольная область»,  аккуратно, с минимальным зазором выделяем выбранный маркер, и щёлкаем «Обрезать».

Картинка готова. Теперь «Файл — Сохранить как…», и сохраняем в папку «images» каталога сайта.

Если нужен маркер помельче, то можно уменьшить масштаб экрана браузера(в Paint у меня, например, масштабирование работает очень грубо), и вырезать картинку помельче.

Если у Вас фон отличается от белого, то чтобы закрасить белые углы (картинка-то вырезается квадратная), можно воспользоваться онлайн фотошопом

Загрузив в него картинку нужно войти в меню «Коррекция» и выбрать «Color balanse». Затем, передвигая бегунки, подобрать нужный Вам фон, и сохранить подправленное изображение обратно на свой компьютер, пройдя в меню «Файл», и выбрав «Сохранить как …»

Как изменить фон полотна изображения

Если фон Вашей страницы вообще тёмный, то можно подобрать заливку цвета, из панели инструментов (слева), и аккуратненько залить белые углы, так называемое полотно изображения. Сама картинка останется такой же как и была.

Теперь приступим к украшению списка этой картинкой. Свойство, применяемое для вставки картинки маркера в список, называется list-style-image. В значении его указывается путь к картинке.


ul{
  list-style-image: url(images/2.png);
}

Если Вам потребуется заключить список в рамку, то в селектор ul добавляется свойство list-style-position: inside;. Это свойство указывает на то, что маркеры должны располагаться внутри рамки, отодвинув при этом содержание.


ul{
  border: 2px solid #ffff00;
  list-style-image: url(images/2.png);
  list-style-position: inside;
}

Можно сделать список в блоке с закруглёнными углами и тенью. Для этого в селектор ul добавляются свойства border-radius и box-shadow.


border-radius: 5px;
box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;

Пример, html документ, с использованием этих блоков для списка с маркерами-картинками.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
  body{
    border: 2px solid #ffff00;
}
  ul{
    border-radius: 5px;
    box-shadow: rgba(0,0,0,5.2) 0px 1px 3px;
    list-style-image: url(images/2.png);
    width: 150px;
    margin: 20px;
}
</style>
</head>
<body>
  <ul>
  <li>Строка списка</li>
  <li>Строка списка</li>
  <li>Строка списка</li>
  <li>Строка списка</li>
  </ul>

</body>
</html>

В этом коде Вам нужно будет только вставить своё название картинки в свойстве list-style-image, там где 2.png, а у меня получился вот такой список

Список с красивыми маркерами

Попробуйте поиграть со значениями (цифрами) в блоках border-radius и box-shadow, чтобы узнать, какие очертания может принять этот список.

Как форматировать текст внутри списка, смотрите в Уроке 1 CSS, в статьях «Шрифты», «Размер и цвет шрифта», «Жирный и курсивный шрифт».

Чтобы сделать такой список в виде меню, нужно вставить в тегах li ссылки на нужные страницы.

Маркеры можно и нарисовать средствами CSS. Об этом в статье CSS маркер списка

На следующей странице будем задавать ширину и местоположение для любых рамок.

Неужели не осталось вопросов? Спросить

-Почему ты стал антисемитом?
-Один еврей испортил мне всю жизнь.
-И как же его звали?
-Мендельсон.

Css маркер списка картинка — Тарифы на сотовую связь

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+3.5+1.0+1.0+1.0+1.0+