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

Пример оформления можно увидеть здесь:

Посмотреть примерСкачать

К сожалению только Mozilla поддерживает переходы псевдоэлементов, поэтому чтобы увидеть данный эффект используйте браузер Mozilla.

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

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

HTML часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<ol>
    <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;
}

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

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

HTML часть

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<ol>
    <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;				
}

Вывод

Жаль пока что только Mozilla поддерживает переходы псевдоэлементов, об этом я уже писал в прошлом уроке CSS3 навигация с переходами. Но за основу смело можно брать данное оформление, т.к. оно явно привлечет внимание вашего посетителя :).

Успехов!

Источник: www.red-team-design.com

Оформление списков ul li для информационных блоков

.list4a {

    padding:0;

    list-style: none;

    counter-reset: li;

}    

.list4a li {

    position: relative;

    padding:12px 20px 20px 28px;

    margin-left: 40px;

    transition-duration: 0.3s;

}

.list4a li:before {

    border: 6px solid transparent;

    line-height: 30px;

    position: absolute;

    top: 0;

    left:-30px;

    width:42px;

    text-align:center;

    font-size: 13px;

    font-weight: bold;

    color: #77AEDB;

    counter-increment: li;

    content: counter(li);

    transition-duration: 0.3s;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

    }

.list4a li:hover:before {

    color: #337AB7;    

}

.list4a li:after {

    position: absolute;

    top: 0;

    left: -30px;

    width: 42px;

    height: 42px;

    border: 6px solid #3399FF;

    border-radius: 50%;

    content: »;

    opacity: 0.5;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;    

}

.list4a li:hover:after {

    animation: 500ms ease-in-out 0s bounceIn;

    opacity: 1;

}    

@keyframes bounceIn {

    0% {

        opacity: 0;

        transform: scale3d(.3, .3, .3);

    }

    20% {

        transform: scale3d(1.3, 1.3, 1.3);

    }

    40% {

        transform: scale3d(.9, .9, .9);

    }

    60% {

        opacity: 1;

        transform: scale3d(1.03, 1.03, 1.03);

    }

    80% {

        transform: scale3d(.97, .97, .97);

    }

    to {

        opacity: 1;

        transform: scale3d(1, 1, 1);

    }

}

Оформляем Select CSS! Пользовательские стили для Select на CSS

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

Нет ничего лучше, чем увидеть как выглядит список своими глазами:

Смотреть примерСкачать

Вот как выглядит этот Select оформленный на CSS:

Похожие статьи на эту тему:

А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

1 шаг. Подключаем необходимые файлы

Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами <head>

HTML КОД

1
2

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/select.js'></script>

2 шаг. HTML структура элемента Select

Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂 ). Простая форма, внутри которой выпадающий Select с его пунктами:

HTML КОД

1
2
3
4
5
6
7
8
9
10
11
12

<form action="#">
    <p>
        <label>Страны Великобритании:</label>
        <select>
            <option>Пожалуйста, выберите страну:</option>
            <option>Англия</option>
            <option>Северная Ирландия</option>
            <option>Шотландия</option>
            <option>Уэльс</option>
        </select>
    </p>
</form>

3 шаг. Добавляем стили для Select CSS

Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

.dropcontainer {
   position:relative;
   font-size: 16px;
   color: #777;
} 
 
.trigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.trigger:hover {
   color: #777;
   background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}
 
.activetrigger {
   color: #777;
   padding: 10px;
   font-size: 16px;
   width: 50%;
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   display: block;
   border: 1px solid #ccc;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.activetrigger:hover {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.activetrigger:active {
   background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
   color: #777;
}
 
.dropcontainer ul {
   font-size: 16px;
   border: 1px solid #ccc;
   border-top: none;
   background: #fff;
   list-style-type: none;
   padding: 10px;
   margin: 0;
   width: 50%;
   z-index: 100;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
 
.dropcontainer ul li {
   padding: 5px;
   -webkit-transition: all 0.5s ease; 
   -moz-transition: all 0.5s ease; 
   -o-transition: all 0.5s ease; 
   transition: all 0.5s ease;
}
 
.dropcontainer ul li:hover {
   background: #f5f5f5;
   outline: none;
}
 
.dropcontainer ul li:first-child {
   display: none;
}
 
.dropcontainer ul li:last-child {
   border-bottom: none;
}
 
.dropdownhidden {
   display: none;
}
 
.dropdownvisible {
   height: auto;
}

В демо примере стили расположены в папке css. Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем «..» (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images.

Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

Вам нужно заменить последнее свойство dropdownvisible:

CSS КОД

1
2
3

.dropdownvisible {
    height: auto;
}

На это:

CSS КОД

1
2
3
4

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
}

И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

В каких браузерах этот Select CSS (выпадающий список) работает нормально?

• ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
• ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
• ✓ Opera 12.14, Opera 12.15, Opera 12.16
• ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• ✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
• ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Дополнение к уроку — креативный эффект при наведении + ВИДЕО

В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

Вывод

Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ при наведении и видео по установке.

Основные пункты статьи, чтобы Вы могли быстро к ним перейти:

1. 1 шаг. Подключаем необходимые файлы
2. 2 шаг. HTML структура элемент Select
3. 3 шаг. Добавляем стили для Select CSS
4. В каких браузерах этот Select CSS
5. Дополнение к уроку — креативный эффект при наведении + ВИДЕО

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Красивый выпадающий список для сайта — делаем выпадающий список

Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.

Выпадающий список для сайта

Не самое простое решение я рассматривал в январе этого года 🙂 :

Посмотреть примерСкачать

Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .

В разметке списка ничего необычного:

1
2
3
4
5
6
7
8
9
10

<section>
    <label>Выберите своего динозавра:</label>
    <select>
        <option value="1">Стегозавр</option>
        <option value="2">Велоцираптор</option>
        <option value="3">Спинозавр</option>
        <option value="4">Археоптерикс</option>
        <option value="5">Апатозавр</option>
    </select>
</section>

Как говорится: <select> он и в Африке <select>. Внутри него есть теги <option>, в которых находятся элементы списка.

В некоторых примерах вы можете увидеть необычные атрибуты, типа data-class или data-link. Здесь нечего боятся, они нужны для правильного функционирования соответствующего списка, потому что там может храниться дополнительная информация.

Пройдемся немного по стилям.

Основные стили находятся в файле cs-select.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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon/icomoon.eot?-rdnm34');
    src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'),
        url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'),
        url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'),
        url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
div.cs-skin-border {
    background: transparent;
    font-size: 2em;
    font-weight: 700;
    max-width: 600px;
}
 
@media screen and (max-width: 30em) {
    .cs-skin-border { font-size: 1em; }
}
 
.cs-skin-border > span {
    border: 5px solid #000;
    border-color: inherit;
    transition: background 0.2s, border-color 0.2s;
}
 
.cs-skin-border > span::after,
.cs-skin-border .cs-selected span::after {
    font-family: 'icomoon';
    content: '\e000';
}
 
.cs-skin-border ul span::after {
    content: '';
    opacity: 0;
}
 
.cs-skin-border .cs-selected span::after {
    content: '\e00e';
    color: #ddd9c9;
    font-size: 1.5em;
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border.cs-active > span {
    background: #fff;
    border-color: #fff;
    color: #2980b9;
}
 
.cs-skin-border .cs-options {
    color: #2980b9;
    font-size: 0.75em;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
 
.cs-skin-border.cs-active .cs-options {
    opacity: 1;
    transition: opacity 0.2s;
}
 
.cs-skin-border ul span {
    padding: 1em 2em;
    backface-visibility: hidden;
}
 
.cs-skin-border .cs-options li span:hover,
.cs-skin-border li.cs-focus span {
    background: #f5f3ec;
}

А находятся эти стили в отдельном файле (для удобства) cs-skin-border.css.

Вывод

Чего только не сделаешь ради неповторимого дизайна своего сайта! И главное — не бойтесь экспериментировать с дизайном, постоянно улучшайте его. Вдруг вы создадите (путем экспериментов) именно тот, который понравится вашим пользователям и они скажут «Вау, мне нравится этот дизайн, что же еще интересного есть на этом сайте!» 😉 .

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/

Как создать красивые нумерованные списки с CSS-счетчиком

От автора: вот сценарий, с которым я сталкиваюсь время от времени: мне нужно создать нумерованный список, и я хочу, чтобы он был красивым.

Поскольку семантический HTML важен, я использую корректный тег ol:

<ol> <li>Stop</li> <li>Drop</li> <li>Roll</li> </ol>

Проблема в том, что «маркеры» (номера пунктов) находятся в мертвой зоне CSS-селектора. У нас нет способа стилизовать их независимо*!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Счетчики в помощь

В CSS есть довольно изящная хитрость, чтобы справиться с этой ситуацией — встроенный механизм счетчика. Вот как это выглядит:

ol li { counter-increment: muffins } ol li:before { content: counter(muffins) «. «; } ol { list-style: none; counter-reset: muffins; }

Давайте рассмотрим этот код шаг за шагом:

counter-increment — это свойство CSS, которое будет увеличивать определенную переменную «counter» при каждом обнаружении нового элемента. Мы помещаем ее в каждый элемент нумерованного списка. Я назвал свою переменную «muffins», потому что я люблю маффины.

Перед каждым элементом нумерованного списка я отображаю текущее значение счетчика. counter() можно рассматривать как функцию CSS, которая возвращает значение для конкретного счетчика. В этом случае маффины.

Я удаляю ненастраиваемые маркеры по умолчанию с помощью list-style: none, и указываю сброс счетчика. Это гарантирует, что если у меня на странице будет несколько элементов ol, счетчик будет сброшен для каждого.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

:before

Этот трюк использует псевдо-элементы. Псевдоэлемент в CSS — это способ внедрить поддельный элемент до или после главных потомков элемента. content позволяет вам указать, что должен содержать этот элемент.

В этом примере мы добавляем текущий счетчик и немного форматирования (точка и пробел) для имитации значения ol по умолчанию. Можете поэкспериментировать с этим!

Стилизация

С помощью этого CSS мы фактически воссоздали ol по умолчанию. Разница в том, что теперь у нас есть селектор CSS, ol li: before, который мы можем использовать для применения пользовательских стилей.

Поддержка браузерами

Счетчики CSS напоминают функцию нового поколения, но на самом деле они существуют вечно. Они поддерживаются в Internet Explorer 8. Используйте это свойство без проблем.

Это кажется большой проблемой!

Рабочая группа CSS согласна с этим — они разработали черновик для нового псевдо-элемента ::marker, который позволил бы вам применять стили непосредственно к маркерам списка. К сожалению, это доступно только в Firefox и Safari. Кроме того: есть еще одна хитрость с CSS-счетчиками…

Вложенные списки

Это действительно крутая вещь: counter имеет двоюродного брата, counters, и это работает для вложенных списков. Обратите внимание, как нумерация складывается рекурсивно:

Вот CSS, необходимый для этого:

ol { counter-reset: cupcake; padding-left: 32px; } ol li { counter-increment: cupcake; } ol li:before { content: counters(cupcake, ‘.’) ‘ ‘; /* Whatever custom styles you want here */ color: hotpink; font-weight: bold; font-family: cursive; }

Это очень похоже, за исключением того, что вы используете counters вместо counter, и вы добавляете «промежуточный» разделитель (в данном случае, точку).

Возвращаем популярность ol

ol не так популярен, как ul. И все же люди любят считать вещи! Что-то не складывается. Может быть с этим аккуратным трюком, мы, наконец, увидим, что ol получит внимание, которого он заслуживает.

Источник: https://joshwcomeau.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Специальные стили для списков CSS

Часто приходиться работать со списками, так как даже меню сайта строиться при помощи списков. В уроке мы научимся работать с различными стилями, что используются для списков.

Как сделать меню сайта на CSS?

Ниже представлено меню, которое мы можем создать лишь при помощи CSS и HTML.

Для создания подобного меню вам не потребуются какие-либо особые знания. Для начала давайте рассмотрим сам HTML:

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>

Здесь все просто. Есть один список и в нем вложен еще один список, который будет раскрываться при наведении мыши на нужную ячейку меню. Теперь давайте рассмотрим весь CSS код:

#navbar ul{
	display: none;
	background-color: #f90;
	position: absolute;
	top: 100%;
}

#navbar li:hover ul {
	display: block;
}

#navbar, #navbar ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#navbar {
	height: 30px;
	background-color: #666;
	padding-left: 25px;
	min-width: 470px;
}

#navbar li {
	float: left;
	position: relative;
	height: 100%;
}

#navbar li a {
	display: block;
	padding: 6px;
	width: 100px;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

#navbar ul li { float: none; }

#navbar li:hover { background-color: #f90; }

#navbar ul li:hover { background-color: #666; }

Основным моментом здесь является то, что при наведении мыши мы делаем вложенный список блоком: #navbar li:hover ul {display: block}. При помощи дополнительных стилей мы указываем чтобы список был в форме блоков и чтобы у него не было значков списка и прочих стилей. Таким образом у нас получается работающее меню для сайта.

20 впечатляющих CSS3 примеров, техник и библиотек

В данной подборке собраны самые лучшие и качественные CSS фишки. Тут  Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.

Спасибо http://tutorialzine.com и рекомендую:

Размытое меню

Это действительно красивое и качественно выполненное меню на чистом CSS. Правильный и удачный пример использования новых технологий CSS.

Демо Ι Скачать

CSS 3D облака

В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.

Перейти

Логотипы на чистом CSS

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

Перейти

Алфавит с CSS анимацией

Отличный и художественный пример использования CSS в алфавите

Перейти

3D навигация для сайта

Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.

Перейти

Дудл от Google на CSS

Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

Перейти

Слайдер

Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

Перейти

Двойное анимированное кольцо

Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

Перейти

Размытие на CSS

Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.

Перейти

Полное руководство по Flexbox

Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

Перейти

Красочное и анимированное меню на CSS3

Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

Перейти

CSS фильтры

Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

Перейти

CSS формы

Пост о CSS формах с многочисленными примерами

Перейти

Прогресс бары на CSS

Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

Перейти

Анимация — Animate.css

Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.

Перейти

Индикаторы загрузки — Spinkit

Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

Перейти

Кнопки

Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант

Перейти

Генератор для создания переключателей

Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.

Перейти

Всплывающие подсказки

CSS библиотека бесплатных всплывающих подсказок — Hint.css

Перейти

Цветовые схемы

Схемы цветов для людей, которые не любят копаться в коде

Перейти

в стиле списка | htmlbook.ru

Краткая информация

Версии CSS

Описание

Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет Работа в качестве маркера. Для подробного ознакомления смотрите информацию о каждом свойстве list-style-type, позиция в стиле списка и изображение в стиле списка отдельно.

Синтаксис

стиль-список: тип-стиль-список || позиция в стиле списка || изображение в стиле списка | унаследовать

Значения

Любые комбинации трех значений стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идет тип маркера, положение и картинка. Ни одно не является обязательным, поэтому используемое значение неиспользуемое можно опустить.

наследовать

Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

  

 
  
  
  <стиль>
   ul {
    стиль списка: квадрат снаружи; / * Квадратные маркеры * /
                               / * Маркеры размещаются за
                                  пределами текстового блока * /
   }
  
 
 
  

   
 Lorem ipsum dolor sit amet 
   
 Consectetuer adipiscing elit 
   
 Sed diem nonummy nibh euismod 
   
 Tincidunt ut lacreet dolore magna aliguam erat volutpat.Ut Wisis
    enim ad minim veniam, quis nostrud упражнение ullamcorper Suscipit lobortis
    nisl ut aliquip ex ea Commodo Conquat. 
  
 
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойств list-style

Объектная модель

[окно.] Document.getElementById («elementID»). Style.listStyle

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение наследования.

Свойство list-style | Справочник CSS

• HTML
  • Учебник HTML
  • Справочник тегов
  • Атрибуты событий
  • Глобальные атрибуты
  • Коды языков
  • Мнемоники
  • Цвета
  • Тесты знаний
• CSS
  • Учебник CSS
  • Справочник свойств
  • Селекторы
  • Обязательства
  • Правила
  • Flexbox генератор
  • Сетевой генератор
  • Учебник МЕНЬШЕ
• JavaScript
  • Интерфейсы веб API
  • Объект Массив
  • Дата размещения
  • Объект Функция
  • Объект Global
  • Объект JSON
  • Объект Математика
  • Номер объекта
  • Объект Объект
  • Объект RegExp
  • Обещание объекта
  • Строка объекта
• jQuery
  • Селекторы
  • События
  • Методы ДОМ
  • Перераз
  • Утилиты
  • Эффекты
  • AJAX
  • Объект Обратные звонки
  • Объект отложен

HTML

• HTML учебник
• Справочник тегов
• Атрибуты событий
• Глобальные атрибуты
• Мнемоники
• Коды языков
• HTML цвета
• Тесты знаний

CSS

• Учебник CSS
• Справочник свойств
• CSS селекторы
• CSS функции
• Правила CSS
• Flexbox генератор
• Сетевой генератор
• МЕНЬШЕ учебник

JavaScript

• Интерфейсы веб API
• Объект Массив
• Дата размещения
• Объект Функция
• Объект Global
• Объект JSON
• Объект Math ^β
• Номер объекта
• Объект Объект
• Обещание объекта
• Объект RegExp
• Строка объекта

jQuery

• jQuery селекторы
• jQuery события
• jQuery методы DOM
• jQuery перемещение
• jQuery утилиты
• jQuery эффекты
• jQuery AJAX
• Обратные вызовы объекта jQuery
• jQuery объект отложен

CSS свойства

• align-content
• align-items
• выровнять себя
• все
• анимация
• задержка анимации
• анимация-направление
• продолжительность анимации
• режим заливки анимации
• количество итераций анимации
• имя-анимации
• состояние воспроизведения анимации
• функция синхронизации анимации
• задняя поверхность-видимость
• фон
• фон-приставка
• фоновый режим наложения
• фон-клип
• цвет фона
• фоновое изображение
• фон происхождения
• фон-позиция
• фон-повтор
• размер фона
• граница
• нижняя граница
• цвет нижней границы
• граница-нижний-левый-радиус
• граница-нижний-правый-радиус
• с окантовкой снизу
• ширина-нижняя граница
• пограничный обвал
• цвет рамки
• изображение границы
• граница-изображение-исход
• повтор изображения границы
• фрагмент изображения границы
• источник изображения границы
• ширина-границы-изображения
• граница слева
• левая рамка, цвет
• с рамкой слева
• ширина рамки слева
• граница-радиус
• граница правая
• цвет границы справа
• с окантовкой справа
• ширина рамки справа
• интервал границы
• с бордюром
• кайма
• цвет верхней границы
• граница-верх-левый-радиус
• граница-верх-правый-радиус
• с бордюром
• ширина по верху границы
• ширина границы
• низ
• тень коробки
• размер коробки
• обрыв после
• перед перерывом
• взлом
• со стороны подписи
• прозрачный
• зажим
• цвет
• количество столбцов
• столбец-заполнитель
• колонна-зазор
• столбец-линейка
• столбец-правило-цвет
• стиль столбца-правила
• ширина-правило столбца
• колонна-пролет
• ширина столбца
• столбцов
• содержание
• счетчик
• сброс счетчика
• курсор
• направление
• дисплей
• пустых ячеек
• фильтр
• гибкий
• гибкая основа
• гибкое направление
• гибкий поток
• гибкий рост
• термоусадочная
• гибкая пленка
• поплавок
• шрифт
• @ font-face
• семейство шрифтов
• размер шрифта
• стиль шрифта
• вариант шрифта
• font-weight
• сетка
• сетка
• сетка-автоматические столбцы
• сетка-автоматический поток
• сетка автоматических рядов
• сетка-столб
• конец столбца сетки
• сетка-столбец-зазор
• начало столбца сетки
• сетка-зазор
• сетка-рядка
• сетка-ряд-начало
• сетка-междурядье
• конец строки сетки
• сетка-шаблон
• сетка-шаблон-области
• сетка-шаблон-столбцы
• сетка-шаблон-ряды
• justify-content
• justify-items
• оправдать себя
• высота
• @keyframes
• осталось
• межбуквенный интервал
• высота строки
• в виде списка
• изображение в стиле списка
• позиция в стиле списка
• тип списка
• маржа
• нижнее поле
• левое поле
• поле справа
• верхняя маржа
• макс. Высота
• макс. Ширина
• @media
• мин-высота
• мин. Ширина
• непрозрачность
• заказать
• детей-сирот
• наброски
• контурный цвет
• контур-офсет
• наброски
• ширина контура
• перелив
• перелив-обертка
• переполнение-x
• переполнение
• набивка
• обивка нижняя
• отступ слева
• обивка правая
• утеплитель
• разрыв страницы после
• разрыв страницы до
• разрыв страницы внутри
• перспектива
• перспективное происхождение
• место-содержание
• единиц места
• самообслуживание
• позиция
• цитат
• изменить размер
• правый
• размер табулятора
• стол-сервиз
• выравнивание текста
• выравнивание текста последнее

в стиле списка | CSS | WebReference

общее свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, общее объявление в качестве маркера списка.

Краткая информация

Обозначения

Значения

Любые комбинации трёх значений определяющих стиль маркеров, они разделяются между собой пробелом. Комбинации значений должны следовать в указанном порядке: вначале идёт тип маркера, положение и картинка. Ни одно не является обязательным, поэтому используемое значение неиспользуемое можно опустить.

Пример

• Многомерный полином
• Нормальный абсолютно сходящийся ряд
• Интеграл от функций
• Коллинеарный экстремум функции

Результат данного примера на рис.1.

Рис. 1. Применение свойства в стиле списка

Объектная модель

Объект .style.listStyle

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
• Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
• Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Проект редактора (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Проект (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров используются следующие обозначения.

• — свойство полностью предоставленным браузером со всеми допустимыми значениями;
• — свойство браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.

Число указывает версию, начиная с свойства, имеющего свойство.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 29.08.2017

Редакторы: Влад Мержевич

 body {
  сброс счетчика: секция; / * Устанавливает значение
счетчика, равным 0 * /
}

h4 :: before {
  счетчик-инкремент: раздел; / * Инкрементирует счетчик * /
  content: счетчик "Секция" (раздел) ":"; / * Отображает текущее
значение счетчика * /
}
 

  
 Вступление 
 
 
 Основная часть 
 
 
 Заключение 
  

 ол {
  сброс счетчика: секция; / * Создает новый счетчик для каждого
тега 
 * /
  тип-стиль-список: нет;
}

li :: before {
  счетчик-инкремент: раздел; / * Инкрементирован только счетчик
текущий уровень вложенности * /
  content: counters (section, ".") ""; / * Добавляем значения всех уровней
вложенности, используя разделитель.'* /
                                   / * Если необходима поддержка 
 Обьединим с данными HTML:
 

  
 элемент 
 
  
 элемент 
    

      
 элемент 
 
      
 item 
 
      
 item 
        

          
 элемент 
 
          
 элемент 
 
        
        

          
 элемент 
 
          
 элемент 
 
          
 элемент 
 
        
      
      
 элемент 
 
    
  
  
 элемент 
 
  
 элемент 
 


  
 элемент 
 
  
 элемент 
 
 
 Результат:
 Спецификации 
 Смотрите также 
 .
No related posts.