CSS списки для сайта
02/04/2016
Просмотры: 1121

Красивое оформление списков на CSS3

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

Поворот цифры при наведении на элемент списка

Поворот цифры при наведении на элемент списка

Сначала создадим вот такой список.

HTML часть

Ниже вы можете увидеть структуру упорядоченного списка, который будем красиво оформлять:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol class="rounded-list">
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>						
</ol>

CSS часть

А сейчас добавим оформление нашему списку:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: .3em;
    border-radius: .3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;	
}
 
.rounded-list a:hover {
    background: #eee;
}
 
.rounded-list a:hover:before {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);	
}
 
.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

Добавляется уголок при наведении на элемент списка

Добавляется уголок при наведении на элемент списка

А это второй вариант оформления списка.

HTML часть

Структура такая же, как у прошлого списка:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ol class="rectangle-list">
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>						
</ol>

CSS часть

Но оформление будет немного другое:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.rectangle-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;	
}
 
.rectangle-list a:hover {
    background: #eee;
}	
 
.rectangle-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}
 
.rectangle-list a:after {
    position: absolute;	
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;				
}
 
.rectangle-list a:hover:after {
    left: -.5em;
    border-left-color: #fa8072;				
}

Использование таких списков положительно скажется на удобстве чтения и просмотра контента на веб сайте, а также позволит значительно улучшить дизайн оформления публикаций.

При создании урока были использованы данные с ресурса: www.red-team-design.com