Оформление списков в блоге CSS

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

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

Предложу вам сегодня ещё несколько идей по оформлению списков. Как они выглядят, посмотрите на тестов блоге.


Коды каждого варианта выкладываю ниже. Здесь же я предоставлю картинки для наглядности. Для начинающих блогеров объясню, как их установить в сообщение.

Вариант1. С анимацией при наведении на номер списка.

списки

Код.

<li><a href="### ">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
</ul>
<style>
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
.older {
  list-style: none;
  margin: 0 auto;
  width: 360px;
  counter-reset: li;
}
.older li {
  border-bottom: dashed 1px #006699;
  margin-top: 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  padding: 5px;
}
.older a {
  text-decoration: none;
  padding: 10px;
  display: block;
  line-height: 30px;
  color: #3A3A3A;
  font-family: 'EB Garamond', serif;
  font-size: 20px;
}
.older a:before {
  display: inline-block;
  content: counter(li);
  counter-increment: li;
  height: 30px;
  width: 30px;
  text-align: center;
  border: solid 1px #dedede;
  margin-right: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.1) inset;
  font-family: 'Fredericka the Great', cursive;
  font-size: 24px;
  -webkit-transition: .4s linear;
  transition: .4s linear;
}
.older a:hover:before {
  color:#D72F2C;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}</style>



Вариант 2. С Анимированными кружочками справа.

списки

Код.
<ul class="beads">
 <li><a href="###">Элемент списка</a>
</li> <li><a href="###">Элемент списка</a></li>
 <li><a href="###">Элемент списка</a>
</li> <li><a href="###">Элемент списка</a></li>
 <li><a href="###">Элемент списка</a></li>
 </ul>
 <style> .beads { list-style: none; background: #EEE3DB; margin: 0; padding-left: 40px; border-radius: 5px; } .beads li { text-transform: uppercase; font-family: 'Montserrat', sans-serif; line-height: 40px; border-bottom: 1px solid #D4D7D6; position: relative; } .beads a { text-decoration: none; color: #464643; display: block; line-height: 40px; position: relative; } .beads a:before { content:""; position: absolute; left: -20px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #A58063; } .beads li:last-child {border-bottom: none;} .beads li:before,  .beads li:after { content:""; position: absolute; border-radius: 50%; } .beads li:before { top: calc(50% - 5px); background: #E0926E; left: -22px; width: 10px; height: 10px; transition: 0.5s linear; } .beads li:after { bottom: 6px; left: -20px; width: 6px; height: 6px; background: #A58063; } .beads li:hover:before {background: #FFCE08;} </style>


Вариант 3. Анимированные разноцветные полоски.

списки


Код.

<ul class="border">
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
<li>Элемент списка</li>
</ul>
<style>
.border {
list-style: none;
padding: 0;
}
.border li {
font-family: "Trebuchet MS", "Lucida Sans";
padding: 7px 20px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 10px solid #f05d22;
box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
     -2px -2px 5px 0 rgba(0,0,0,.1),
    2px 2px 5px 0 rgba(0,0,0,.1),
    -2px 2px 5px 0 rgba(0,0,0,.1);
font-size: 20px;
letter-spacing: 2px;
transition: 0.3s all linear;
}
.border li:nth-child(2){border-color: #8bc63e;}
.border li:nth-child(3){border-color: #fcba30;}
.border li:nth-child(4){border-color: #1ccfc9;}
.border li:nth-child(5){border-color: #493224;}
.border li:hover {border-left: 10px solid transparent;}
.border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
.border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
.border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
.border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
.border li:nth-child(5):hover {border-right: 10px solid #493224;}
</style>


Вариант 4. Можно применить в качестве меню или придумать что - то своё.




Код.

<ul class="menu">
<li>МЕНЮ</li>
<li>"Салат Греческий"<em>120 руб</em></li>
<li>"Солянка"<em>130 руб</em></li>
<li>"Гуляш"<em>300 руб</em></li>
<li>"Рыба заливная"<em>250 руб</em></li>
<li>"Отбивные"<em>450 руб</em></li>
</ul>
<style>
.menu {
list-style: none;
padding: 0;
border: 1px solid rgba(0,0,0, .2);
}
.menu li {
overflow: hidden;
padding: 6px 10px;
font-size: 20px;
}
.menu li:first-child {
font-weight: bold;
padding: 15px 0 10px 15px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0, .2);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: #679bb7;
font-size: 24px;
box-shadow: 0 10px 20px -5px rgba(0,0,0, .2);
}
.menu li:first-child:before {
content: "\2749";
margin-right: 10px;
}
.menu span {
float: left;
width: 75%;
color: #7C7D7F;
}
.menu em {
float: right;
color: #9c836e;
font-weight: bold;
}</style>


Вариант 5. С эффектом лёгкой анимации при наведении.


Код.

<ol class="rectangle">
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
<li><a href="###">Элемент списка</a></li>
</ol>
<style>
.rectangle {
counter-reset: li;
list-style: none;
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rectangle a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #D3D4DA;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.rectangle a:hover {background: #DCDDE1;}     
.rectangle a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9097A2;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle a:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle a:hover:after {
left: -.5em;
border-left-color: #9097A2;
}</style>


В некоторых кодах, где вы видите вот такие ##решётки вставьте адреса страниц (URL), на которые должна вести ссылка. Если нет такой необходимости, убираем в коде то, что отмечео синим цветом.

<li><a href="###">Элемент списка</a></li>


И наоборот, если нужно сделать переход по ссылке - добавляем их (в кодах, где нет таковых). Например вариант 3.

Так же добавляйте дополнительные пункты при необходимости.

<li><a href="###">Элемент списка</a></li>

Чтобы ссылки открывались в новом окне браузера, нужно к коду добавить-

<a href="###" target="_blank">Элемент списка</a>

В сообщении блога, перейдите в режим HTML и вставьте выбранный код в нужное место. Такие списки можно применить в качестве вертикального меню. Установите код в гаджет HTML/JavaScript в сайтбаре блога и дайте в нём ссылки на ваши страницы. Оригинальная менюшка получается без лишней мороки. В сайтбаре тестового блога, для наглядности установила. Ссылка выше.

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

Всем удачи, спасибо за внимание и до встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


10 комментариев:

  1. Виктория, мне часто бывает нужно сделать список в сообщении. Как интересно у тебя получается! У меня так не получится! Наверное, я не смогу!

    ОтветитьУдалить
    Ответы
    1. Ирина, а что тут мочь. Скопирую понравившеся код, вставь свои названия в пункты, если нужны ссылки, вставляй их. И устанавливай где нужно.

      Удалить
  2. Здравствуйте, Виктория! Спасибо за полезную шпаргалку! Мне пригодилось здесь https://retrootkritka.blogspot.ru/2017/10/blog-post_15.html#more
    А нельзя ли сделать так, чтобы ссылки открывались в новом окне? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, понравился дизайн Вашего блога. Красиво оформлен список. Конечно можно и в новом окне. Дописала в посте как это сделать. Вообще можно сделать чтобы все ссылки в новом окне открывались . Вот пост http://www.shpargalochki.ru/2013/12/ssylka-v-novom-okne.html

      Удалить
    2. Спасибо, Виктория! Получилось! Жду новых шпаргалок! Хотелось бы хорошую карту блога! Удачи Вам!

      Удалить
  3. и Вам удачи. С картами блога одна проблема. Я их все перепробовала и все или слетают периодически или отражают толко 150 последних постов. Свою делаю вручную. Правда на одном моём блоге стоит , но она без категорий, но красивая.http://www.dela-domashnie.ru/p/blog-page_10.html

    ОтветитьУдалить
    Ответы
    1. А если сделать Архив блога на отдельной странице? Это возможно?

      Удалить
  4. Да, можно. Тоже пробовала, но он тоже отображает толко 150 последних постов. Если болше сообщений, то они пропадают из него. Жалко ведь. У меня таким образом в своё время пропал весь 13 и половина 14 года. Пришлос ручками переделыват всё. Да и вроде как поисковики такой простой больше любят. обсуждали с ребятами на форуме. Тут уж решать самим.
    Вот код у Сергея такой с архивом можно взять.https://wordpressmania.ru/arhiv-dlya-blogger-na-otdelnoy-stranitse/

    ОтветитьУдалить
  5. Спасибо. Не получается Архив. Конфликт кодов! А просто гаджета Разделы блога не достаточно? Это же тоже подобие содержания?

    ОтветитьУдалить
    Ответы
    1. Да , как я говорила беда с картами. Можно и без карты. Ярлыки тоже хорошо для навигации. Внутренняя перелинковка и т. п.

      Удалить

Пользовательский поиск
Foto Saya
My Photo