Оформяне на списъци чрез CSS в блог

Здравейте всички! При създаването на уеб страници може да се наложи да организираме по различен начин предоставената в тях информация. Когато искаме да използваме списък в блог, в редактора на публикациите имаме два вида, от които да избираме: номерирани и с водещи символи – маркери ( ще ги наричам маркировани списъци).

Маркировани списъци

Използвайки стандартни 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>
</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

<ol class="rectangle">
<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>

Инсталиране

В публикацията отидете в HTML режим и поставете избрания код на правилното място. Такива списъци могат да се използват като вертикално меню. Инсталирайте кода в притурката HTML / JavaScript в темата на блога и му допишете връзки към страниците си. Оригиналното меню се получава без много проблеми. Ето така, с помощта на CSS стилове можете да направите от скучните списъци нещо интересно и полезно. Променете цвета на фона, размера и стиловете на шрифта, височината на блоковите елементи и така нататък.

Успех на всички и доскоро.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: