Октябрь 25, 2019 Запись была обновлена
Красивое оформление списков на 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
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Скажите влияет ли такой список на seo если не прописывать ссылки
и можно ли как нибудь сделать не используя тега
тег «а»
Di, так создается большинство меню и на SEO это несильно влияет, если конечно у вас не просто список незакрытых(без атрибута rel="nofollow") ссылок на разные сайты. Тогда поисковик может что-то и заподозрить.
в меню на сколько понимаю ссылка, а надо что бы не было ссылки, но при наведении менялся фон, то есть я сделал как описано только без href=»»
сомнения в том что робот видит тег «<a" но ссылки нету, возможно это как нибудь по другому сделать, использовать нейтральный тег? но какой?
Дело в том, что псевдоселектор :hover может применяться в основном только к тегам "a", "input", "img", а в ссылке можно поставить решетку(#).
.Юрий, спасибо за инфомацию.
отличное решение, которое я искал…
Все понравилось, осталось только применить.
Спасибо за решение, как раз очень классно подошло к интерфейсу одного из проектов. Немного оживило его 😀
Рад, что вам пригодилось! 🙂
Огромное спасибо, спасли!)) 😮
Очень к стати пришёлся ваш пример! Спасибо! Как раз начал верстать новый проект. Есть вопросик! Как сделать, чтобы цифры в кружочках не крутились в обратную сторону, когда курсор передвигаем на новый пункт меню?
Здравствуйте, Алексей! За это отвечает свойство transform в селекторе .rounded-list a:hover:before, у которого по умолчанию поворот осуществляется на 360 градусов.
а вот как там отменить обратное вращение?
Не только в мазиле. У меня в Yandex-браузере и в Orbitum все эффекты видны. Значит, и в других на базе Chromium должны быть.
подскажите как сделать кнопку активной для вордпресса?
В JS коде это будет выглядеть так:
document.getElementById('submit').disabled = true;Но для чего вам делать кнопку активной?
чтобы видеть в какой рубрике находишься
В данном примере не работает атрибут start. Может его можно как-то заменить? Нужно что бы список начинался не с первого элемента, а с 18.
Конечно можно. И без помощи Javascript. Это нумерованный список и вам нужно вставить следующее (только переделать соответствующим, для вашего списка, образом):
Спасибо! 😉
Здравствуйте!
Почему-то на всех пункатах списка стоит цифра «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) — для нечетных.
Подскажите, пожалуйста, как сделать без нумерации список.
li { list-style-type: none; } — не помогает.
Ann, это свойство не помогает, потому что здесь нумерация реализована с помощью псевдоэлемента :before. Если хотите удалить нумерацию в первом (кружки) списке, тогда удалите код в файле style.css с 60-й по 82-ю строку.
Здравствуйте Юрий. Мне очень понравился первый вариант оформления списков. Но насколько поняла, это работает если в списке есть ссылки, а если в списке нет ссылок, то не получается добиться такого эффекта и вида.
Вы можете также добавить оформление списков, которые не имеют ссылки внутри.
Буду признательна. Спасибо.
Здравствуйте. Вот сделал для Вас эти же списки без ссылок: СКАЧАТЬ.
Юрий, спасибо вам. Теперь я смогу применить их на своем сайте. Я долго думала как красиво оформить списки в контенте.
Для улучшения юзабилити сайта, это 1 шаг вперед. Спасибо.
Я рад что Вам помог данный урок 🙂 !
Спасибо, Юрий, за отличный урок! А если хочется, чтобы крутились фоновые иконки-картинки у ссылок в списке? Не подскажете?
Добрый день!
Хочу сделать, чтобы в каждом кружочке списка отображалась иконка fontawesome fa fa-cog. В css делаю так:
В результате получаю вращающийся пустой квадратик, хотя font-awesome.css в хедере подключен. Помогите разобраться. Спасибо!
Алексей, здравствуйте!
Для ссылки нужно задать:
А затем для псевдо-селектора:
Эти свойства там используются. Просто привел начало кода, остальное, как в примере. Дело в том, что не работает
Проблема только в этом.
Также обязательно необходимо указать семейство шрифтов:
Если Вы используете иконки от Font Awesome.
Действительно помогло. Спасибо!
Здравствуйте Юрий.
Возможно ли сделать так чтобы в редакторе вордпресс была возможность добавлять списки с этим оформлением как в первом варианте (без ссылок). Я пробовала вручную прописать код списка в хтмл версии редактора вордпресс, но код удаляется когда переключаюсь в визуальный редактор вордпресс.
Здравствуйте.
Сделать это можно. Но делается это другим способом. В редакторе WordPress (в текстовом варианте) Вам необходимо для списка указать класс. А затем в CSS файле Вашей темы прописать необходимые стили.
Как сделать в шаблоне БЛОГСПОТ (либо через виджет) что бы в кружочках были пронумерованы строки? На данный момент только единицы, 458 строку css в блогспоте не могу найти.
Здравствуйте, Стас! Вам необходимо скопировать все стили с 6-й строки по 80-ю и вставить их в свой файл стилей. Также обратите внимание на псевдоселектор :before (строки 57 и 58 исходного демо), где происходит нумерация:
Здравствуйте. Пробовала добавить class в текстовом редакторе. Когда переключаюсь в визуальный режим добавленный class удаляется. Поэтому не знаю как решить эту проблему.
Нужно отключить автоформатирование кода визуальным редактором WordPress. Самое простое решение — это установить плагин "PS Disable Auto Formatting".
Когда ставлю стиль без ссылок выложенный Вами архивом, сайт съезжает в право
все, разобрался
во втором примере можно реализовать без нумерации список для тега <ul> а не <ol>?
если ставить построение списка под <ul> то тогда у каждой позиции стоит цифра 1, что можно изменить чтобы убрать нумерацию?
В 102-й строке файла style.css изменить следующий параметр:
на
И удалить или закоиментировать данное свойство:
Ну и зачем стандартным свойством убрать маркеры у ненумерованного списка.
спасибо, совет помог, маркеры у ненумерованного списка убрал с помощью: list-style-type: none;
есть еще вопрос связанный со сменой цвета красного квадрата, в разделах css я его меняю в background и border-left-color на #0090EC и почему то ничего не происходит
где еще можно изменить цвет этого блока?
все у меня применилось по цвету, почему то в кеше страница была и соответственно изменения не отображались!
Юрий, спасибо вам, за общение и ответы на комментарии — в наше время это редкость!
Здравствуйте Юрий.
Подскажите пожалуйста как убрать пустую строку в конце блока.
Добрый день, Антон!
Проверьте на теги <br>.
Проверьте на внутренние отступы.
Проверьте на внешние отступы.
Проверьте, все ли закрыты теги.
Доброго времени суток как мне реализовать 1 вид списка для в постах на моем сайте, если можно то поясните где что менять и добавлять
Иван, добрый день!
CSS необходимо поместить в Ваш файл стилей (чаще всего это style.css). А HTML часть туда, где необходимо разместить списки.
Доброго дня. Сделал по вашей инструкции и тот и тот вид списков. Получилось классно, только проблема появилась. Верхнее меню тоже получилось с маркерованное иконками и появилось подчеркивание. Подскажите как это убрать? Попытался сделать новый класс оформления меню, не получилось.
Здравствуйте!
Задайте уникальный класс для списка, которые находятся на странице в контентной части сайта. Тогда для верхнего меню они не будут применены.
Добрый день, скажите пожалуйста…при чем тут в списках ссылки. Я что то не помню списки со ссылками. Нумерованный и маркированный списки делаются без ссылок внутри. Буду признательный за ответ.
Добрый вечер! Подскажите пожалуйста, если мне нужно оформить нумерованные списки в статьях на сайте. Для одной статьи все получилось, но как добавить CSS стили так, чтобы внешний вид маркерованных списков поменялся во всех статьях, где они есть?!
Помогите разобраться. Спасибо!
Добрый вечер! Ответил на почту.
Добрый день , скажите пожалуйста как сделать вертикальное меню с иконками, так что бы когда пункт меню в несколько строчек иконка по центру была. Делаю адаптивное боковое меню , но с иконками не понимаю как быть)
Добрый день, Михаил!
В данной статье есть пример того, как необходимо сделать вам. Когда пункт меню растянется на несколько строчек, то цифра все равно останется по центру. Это делается с помощью псевдоэлемента :before. Посмотрите внимательно как сделано в демо-статьи и вы сможете реализовать по тому же принципу.