Лого SiteHere.ru

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

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

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

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

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

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



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

Поворот при наведении

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



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


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

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

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



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


Вывод

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


Успехов!

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

64 комментария к записи
  • Di

    Скажите влияет ли такой список на seo если не прописывать ссылки
    и можно ли как нибудь сделать не используя тега

     
  • Di

    тег «а»

     
    • Юрий

      Di, так создается большинство меню и на SEO это несильно влияет, если конечно у вас не просто список незакрытых(без атрибута rel="nofollow") ссылок на разные сайты. Тогда поисковик может что-то и заподозрить.

       
      • Di

        в меню на сколько понимаю ссылка, а надо что бы не было ссылки, но при наведении менялся фон, то есть я сделал как описано только без href=»»

        сомнения в том что робот видит тег «<a" но ссылки нету, возможно это как нибудь по другому сделать, использовать нейтральный тег? но какой?

         
        • Юрий

          Дело в том, что псевдоселектор :hover может применяться в основном только к тегам "a", "input", "img", а в ссылке можно поставить решетку(#).

           
        • Надежда

          .Юрий, спасибо за инфомацию. 

           
  • Вадим

    отличное решение, которое я искал…

     
    • Надежда

      Все понравилось, осталось только применить.

       
  • Сергей

    Спасибо за решение, как раз очень классно подошло к интерфейсу одного из проектов. Немного оживило его 😀

     
    • Юрий

      Рад, что вам пригодилось! 🙂

       
  • Сергей

    Огромное спасибо, спасли!)) 😮

     
  • Алексей

    Очень к стати пришёлся ваш пример! Спасибо! Как раз начал верстать новый проект. Есть вопросик! Как сделать, чтобы цифры в кружочках не крутились в обратную сторону, когда курсор передвигаем на новый пункт меню?

     
    • Юрий

      Здравствуйте, Алексей! За это отвечает свойство transform в селекторе .rounded-list a:hover:before, у которого по умолчанию поворот осуществляется на 360 градусов.

       
      • Алексей

        а вот как там отменить обратное вращение?

         
  • Ирина

    Не только в мазиле. У меня в Yandex-браузере и в Orbitum все эффекты видны. Значит, и в других на базе Chromium должны быть.

     
  • Алексей

    подскажите как сделать кнопку активной для вордпресса?

     
    • Юрий

      В JS коде это будет выглядеть так:
      document.getElementById('submit').disabled = true;
      Но для чего вам делать кнопку активной?

       
      • Алексей

        чтобы видеть в какой рубрике находишься

         
  • Lesay

    В данном примере не работает атрибут start. Может его можно как-то заменить? Нужно что бы список начинался не с первого элемента, а с 18.

     
    • Юрий

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

      1
      2
      3
      4
      5
      6
      
      li { list-style-type: none; } /* убираем нумерацию по умолчанию */
      ol { counter-reset: list 18; } /* с какого числа будем нумеровать */
      ol li:before {
          counter-increment: list; /* Увеличиваем значение счетчика */
          content: counter(list) ". "; /* Выводим число */
      }
       
  • Юрий

    Здравствуйте!

    Почему-то на всех пункатах списка стоит цифра «1». Скажите пожалуйста как сделать чтобы было 1, 2, 3 и тд.

     
    • Юрий

      Юрий, уберите в 458 строке (в файле Вашей темы style.css) свойство list-style-type: decimal; и вместо него добавить вот это — counter-reset: li;.

       
  • Юрий

    Большое спасибо! 😎

     
  • Виталий

    Спасибо, сделал как описано выглядит класс 😎 Но не могу найти почему на всех пунктах в квадратике цифра 1 стоит. Искал по вашей подсказке Юрию но не нашел такого кода на своем сайте.

     
  • Виталий

    Ааа все разобрался, спасибо еще раз 🙂

     
    • Юрий

      Виталий, отлично что самостоятельно разобрались!

       
      • Виталий

        А как сделать чтобы текст фона списка менялся поочередно через один элемент. (темный, светлый, темный, светлый…)?

         
        • Юрий

          Виталий, необходимо использовать псевдокласс ol li:nth-child(2n+1) — чтобы выбрать нечетные элементы списка, и ol li:nth-child(2n) — для нечетных.

           
  • Ann

    Подскажите, пожалуйста, как сделать без нумерации список.
    li { list-style-type: none; } — не помогает.

     
    • Юрий

      Ann, это свойство не помогает, потому что здесь нумерация реализована с помощью псевдоэлемента :before. Если хотите удалить нумерацию в первом (кружки) списке, тогда удалите код в файле style.css с 60-й по 82-ю строку.

       
  • Зуля

    Здравствуйте Юрий. Мне очень понравился первый вариант оформления списков. Но насколько поняла, это работает если в списке есть ссылки, а если в списке нет ссылок, то не получается добиться такого эффекта и вида.
    Вы можете также добавить оформление списков, которые не имеют ссылки внутри.
    Буду признательна. Спасибо.

     
    • Юрий

      Здравствуйте. Вот сделал для Вас эти же списки без ссылок: СКАЧАТЬ.

       
      • Зуля

        Юрий, спасибо вам. Теперь я смогу применить их на своем сайте. Я долго думала как красиво оформить списки в контенте.
        Для улучшения юзабилити сайта, это 1 шаг вперед. Спасибо.

         
        • Юрий

          Я рад что Вам помог данный урок 🙂 !

           
  • Вячеслав

    Спасибо, Юрий, за отличный урок! А если хочется, чтобы крутились фоновые иконки-картинки у ссылок в списке? Не подскажете?

     
  • Алексей

    Добрый день!

    Хочу сделать, чтобы в каждом кружочке списка отображалась иконка fontawesome fa fa-cog. В css делаю так: 

    .entry-content a:before {
        content: "\f013";
    	color: #fff;}

    В результате получаю вращающийся пустой квадратик, хотя font-awesome.css в хедере подключен. Помогите разобраться. Спасибо!

     
    • Юрий

      Алексей, здравствуйте!

      Для ссылки нужно задать:

      .entry-content a {
           position:relative;
      }

      А затем для псевдо-селектора:

      .entry-content a:before {
          position:absolute;
          content: "\f013";
          color:#000;
      }
       
      • Алексей

        Эти свойства там используются. Просто привел начало кода, остальное, как в примере. Дело в том, что не работает  

         content: "\f013";

        Проблема только в этом.

         
        • Юрий

          Также обязательно необходимо указать семейство шрифтов:

          .entry-content a:before {
               ...
              font-family: FontAwesome;
              content: "\f013";
              ...
          }

          Если Вы используете иконки от Font Awesome.

           
          • Алексей

            Действительно помогло. Спасибо!

             
  • Зума

    Здравствуйте Юрий.

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

     
    • Юрий

      Здравствуйте.

      Сделать это можно. Но делается это другим способом. В редакторе WordPress (в текстовом варианте) Вам необходимо для списка указать класс. А затем в CSS файле Вашей темы прописать необходимые стили.

       
  • Стас

    Как сделать в шаблоне БЛОГСПОТ (либо через виджет) что бы в кружочках были пронумерованы строки? На данный момент только единицы, 458 строку css в блогспоте не могу найти.

     
    • Юрий Немец

      Здравствуйте, Стас! Вам необходимо скопировать все стили с 6-й строки по 80-ю и вставить их в свой файл стилей. Также обратите внимание на псевдоселектор :before (строки 57 и 58 исходного демо), где происходит нумерация:

      .rounded-list a:before{
      	content: counter(li);
      	counter-increment: li;
              ...
      }

       

       
  • Зума

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

     
    • Юрий Немец

      Нужно отключить автоформатирование кода визуальным редактором WordPress. Самое простое решение — это установить плагин "PS Disable Auto Formatting".

       
  • игорь

    Когда ставлю стиль без ссылок выложенный Вами архивом, сайт съезжает в право

     
  • игорь

    все, разобрался

     
  • Максим

    во втором примере можно реализовать без нумерации список для тега <ul> а не <ol>?

    если ставить построение списка под <ul> то тогда у каждой позиции стоит цифра 1, что можно изменить чтобы убрать нумерацию?

     
    • Юрий Немец

      В 102-й строке файла style.css изменить следующий параметр:

      content: counter(li, decimal);

      на

      content: "*";

      И удалить или закоиментировать данное свойство:

      counter-increment: li;

      Ну и зачем стандартным свойством убрать маркеры у ненумерованного списка.

       
      • Максим

        спасибо, совет помог, маркеры у ненумерованного списка убрал с помощью: list-style-type: none;

        есть еще вопрос связанный со сменой цвета красного квадрата, в разделах css я его меняю в background и border-left-color на #0090EC и почему то ничего не происходит yes где еще можно изменить цвет этого блока? 

         
        • Максим

          все у меня применилось по цвету, почему то в кеше страница была и соответственно изменения не отображались! 

          Юрий, спасибо вам, за общение и ответы на комментарии — в наше время это редкость!

           
  • Антон

    Здравствуйте Юрий.

    Подскажите пожалуйста как убрать пустую строку в конце блока. 

     
    • Юрий Немец

      Добрый день, Антон!

      Проверьте на теги <br>.

      Проверьте на внутренние отступы.

      Проверьте на внешние отступы.

      Проверьте, все ли закрыты теги.

       
  • Иван

    Доброго времени суток как мне реализовать 1 вид списка для в постах на моем сайте, если можно то поясните где что менять и добавлять

     
    • Юрий Немец

      Иван, добрый день!

      CSS необходимо поместить в Ваш файл стилей (чаще всего это style.css). А HTML часть туда, где необходимо разместить списки.

       
  • Waltersr

    Доброго дня. Сделал по вашей инструкции и тот и тот вид списков. Получилось классно, только проблема появилась. Верхнее меню тоже получилось с маркерованное иконками и появилось подчеркивание. Подскажите как это убрать? Попытался сделать новый класс оформления меню, не получилось.

     
    • Юрий Немец

      Здравствуйте!

      Задайте уникальный класс для списка, которые находятся на странице в контентной части сайта. Тогда для верхнего меню они не будут применены.

       
  • Евгений

    Добрый день, скажите пожалуйста…при чем тут в списках ссылки. Я что то не помню списки со ссылками. Нумерованный и маркированный списки делаются без ссылок внутри. Буду признательный за ответ.

     
  • BuildBody

    Добрый вечер! Подскажите пожалуйста, если мне нужно оформить нумерованные списки в статьях на сайте. Для одной статьи все получилось, но как добавить CSS стили так, чтобы внешний вид маркерованных списков поменялся во всех статьях, где они есть?! 

    Помогите разобраться. Спасибо! 

     
    • Юрий Немец

      Добрый вечер! Ответил на почту.

       
  • Михаил

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

     
    • Юрий Немец

      Добрый день, Михаил!

      В данной статье есть пример того, как необходимо сделать вам. Когда пункт меню растянется на несколько строчек, то цифра все равно останется по центру. Это делается с помощью псевдоэлемента :before. Посмотрите внимательно как сделано в демо-статьи и вы сможете реализовать по тому же принципу.

       

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

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