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

Как сделать красивый ненумерованный списокМы хотим получить красивый ненумерованный список, маркеры которого будут представлен в виде кружочков с галочками. Конечно же, легче всего это сделать при помощи небольшого изображения этого маркера и спокойно прописать путь к нему в свойстве списка. Но мы лёгких путей не ищем. Мы будем использовать все возможности, которые предоставляет нам CSS3, а конкретно создание кругов, трансформации прямоугольников и псевдо-классы.

И так, во первых опишем наш стандартный список.

<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка -  Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
<li>Третий элемент списка - Pellentesque fermentum dolor.</li>
<li>Четвёртый элемент списка - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>5-й элемент списка  - Aliquam tincidunt mauris eu risus.</li>
<li>6-й элемент списка самый большой - Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
<li>7-й элемент списка самый маленький.</li>
</ul>

Начнём с элементарного описания списка в файле style.css

ul{
margin: 12px;
padding: 0;
}
ul li{
margin: 0 0 12px 0;
font-size: .9em;
line-height: 1em;
}

Теперь приступим к работе. Опишем свойства, которые видят только браузеры. поддерживающие CSS3

body:nth-of-type(1) ul li{
list-style-type:none;
padding: 0 0 0 45px;
position:relative;
}

Теперь, используя псведо класс before мы добавим к маркеру небольшой чёрный кружочек слева от каждого текста элемента списка.

body:nth-of-type(1) ul li:before{
content:"\00a0";
/*Сделаем элемент блочным*/
display: block;
 
/*сделаем кружочки*/
border: solid 9px #000;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
height: 0;
width: 0;
 
/* Теперь принудительно поставим кружочки слева от текста*/
position: absolute;
left: 7px;
top: 40%;
margin-top: -8px;
}

При помощи псведо класса after мы создадим галочку и поместим её поверх нашего кружочка.

body:nth-of-type(1) ul li:after{
content:"\00a0";
display:block;
 
/*Сделаем небольшой прямоугольник, при помощи границ, чтобы у нас получилась английская буква L*/
width: 3px;
height: 6px;
border: solid #fff;
border-width: 0 2px 2px 0;
 
/*Поставим галочку поверх кружочка*/
position:absolute;
left: 14px;
top: 40%;
margin-top: -4px;
 
/*Повернём её на 45 градусов чтобы вместо буквы L получить галочку*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}


Один комментарий на «“Как сделать красивый ненумерованный список”»

  1. А для чего такой сложный способ, который, видимо, будет работать не во всех браузерах? Если элементарно можно подгрузить картинкой эту галочку и всё получится в несколько строк?

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

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