Оформление многоуровневых нумерованных списков

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

Перейти на страницу с примерами

HTML-разметка для каждого списка будет следующей:

<ol class="list">
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a>
    <ol class="sublist">
      <li><a href="">Элемент вложенного списка первого уровня</a>
        <ol class="sublist2">
          <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>
  </li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>			
</ol>

Пример 1

ol {
  counter-reset: li;
  list-style: none; 
  margin: 0;
  font-family: 'Didact Gothic', sans-serif; /*подключаем через Google Web Fonts*/
}
li:before {
  counter-increment: li;
  content: counters(li,".") ". "; 
  padding: 5px 0;
  display: inline-block;
  margin-right: 5px;
  border-radius: 3px;
  color: white;
  text-align: center;
  width: 50px;
  transition:.4s linear;
}
.list a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  color: #716B65;
  margin: 5px 0;
}
.list>li:before {background: #2D5957;}
.list>li:hover:before {background: #112221;}
.sublist>li:before {background: #3AA898;}
.sublist>li:hover:before {background: #215f56;}
.sublist2>li:before {background: #8DC6B3;}
.sublist2>li:hover:before {background: #55aa8e;}

Пример 2

ol {
  counter-reset: li;
  list-style: none; 
  color: #0F2240;
}
.list a {
  font-family: 'Roboto', sans-serif;
  display: block;
  text-decoration: none;
  padding: 5px;
  margin-bottom: 5px;
  background:#8BB4D2; 
  border-radius: 5px;
  border: 2px solid #8BB4D2;
  color: #0F2240;
}
.list a:before {
  counter-increment: li;
  content: counters(li,".") ". "; 
  display: inline-block;
  margin-right: 5px;
  font-weight: bold;
}
.sublist a {
  background-color: white;
  background-image: radial-gradient(#8BB4D2 .5px, rgba(255,255,255,0) 1px);
  background-size: 6px 6px;
}
.sublist2 a {background: white;}

Пример 3

ol {
  counter-reset: li;
  list-style: none; 
  font-family: 'Roboto', sans-serif;
}
.list a {
  display: block;
  text-decoration: none;
  margin-bottom: 5px;
  border-top: 2px solid #68B8AE;
  color: #0F2240;
  background: white;
}
.list a:before {
  counter-increment: li;
  content: counters(li,".") ". "; 
  display: inline-block;
  padding: 5px;
  margin-right: 10px;
  font-weight: bold;
  background: #CDE5E1;
  border-left: 2px solid #68B8AE;
  border-bottom: 2px solid #68B8AE;
  border-right: 2px solid #68B8AE;
  color: #68B8AE;
  transition:.3s linear;
}
.list a:hover:before {
  background: #68B8AE;
  color: white;
}

Пример 4

.list, .sublist, .sublist2 {
  margin: 0;
  padding: 0;
  counter-reset: li;
  list-style: none;  
  font-family: 'Didact Gothic', sans-serif;
}
li:before {
  counter-increment: li;
  content: counters(li,".") ". "; 
  padding: 5px 0;
  display: inline-block;
  margin-right: 5px;
  border-radius: 20px;
  color: white;
  text-align: center;
  width: 50px;
}
.list a {
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  color: #716B65;
  margin: 5px 0;
}
ol.list li:before {background: #65486C;}
ol.sublist li:before {
  background: #7282A3; 
  box-shadow: 10px 0 0 #97A8C2;
  margin-right: 15px;
  -webkit-transition: .4s linear;
  -moz-transition: .4s linear;
  -ms-transition: .4s linear;
  -o-transition: .4s linear;
  transition: .4s linear;
}
ol.sublist li:hover:before {
  box-shadow: none;
  margin-right: 5px;
}
ol.sublist2 li:before {
  background: #B9ACA6;
  box-shadow: 10px 0 0 #CEBEB1, 20px 0 0 #D9C9BC;
  margin-right: 25px;
  transition: .4s linear;
}
ol.sublist2 li:hover:before {
  box-shadow: none;
  margin-right: 5px;
}

Пример 5

Стили CSS
ol {
  margin: 0;
  counter-reset: li;
  list-style: none;  
  font-family: 'Kurale', serif;
}
.list a {
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  padding: 5px;
  position: relative;
  color: #2D3134;
}
.list a:before {
  counter-increment: li;
  content: counters(li,".") ". "; 
  padding: 5px 1px 5px 5px;
  color: #948E82;
  margin-right: 5px;
  text-align: center;
  border-right: 3px solid;
  border-left: 3px solid;
  border-top: none; 
  border-bottom: none; 
  border-radius: 40px/60px;
} 

Поделиться:

Обтекание картинки текстом

Как сделать обтекание картинки текстом

С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.

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

Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.

Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.

Разметка HTML

<h1>List of towns in England</h1>
<h2>Amersham</h2>
<p><img class="left" src="https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg">Amersham is ...</p>

<h2>Buxton</h2>
<p><img class="right" src="https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg">Buxton is ...</p>

<h2>Chesterfield</h2>
<p class="columns">Chesterfield is ...</p>
<img class="img-center" src="https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg">
<p class="columns">It has ...</p>

<h2>Dartmouth</h2>
<p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>

CSS стили

body {
  margin: 0;
  background: #FFF8E8;
  padding: 0 20px;
  font-size: 90%;
  counter-reset: h2; /*создаем счетчик для любого заголовка h2*/
}
h1 {
  font-family: 'Lora', serif;
  color: #564C4A;
  font-weight: 300;
}
h2 {
  font-family: 'Lora', serif;
  color: #B00D22;
  font-weight: 300;
  clear: both; /* отменяем обтекание с обеих сторон */ 
  padding: 1em 0 0.25em;
  border-bottom: 2px solid;
  counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */
}
h2:before {
  content: " " counter(h2) '. '; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */
}
p {
  font-family: arial;
  color: #785F5B;
  line-height: 1.3;
}

/********** картинка слева **********/
.left {
  float: left;
  margin: 0 1em 1em 0;
}

/********** картинка справа **********/
.right {
  float: right;
  margin: 0 0 1em 1em;
}

/********** картинка между текста **********/
.columns {
  float: left;
  max-width: 30%;
  margin: 0;
}
.img-center {
  float: left;
  margin: 0 1.5% 0 1.5%;
  max-width: 37%;
}
/********** картинка по центру********* */
.center {
  display: block;
  margin: 0 auto 1.5%;
}

Обтекание картинки с двух сторон

float-middle

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

Разметка HTML

<div class="wrap">
  <img src="cat.jpg">
    <div class="left">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    <div class="right">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

CSS стили

.wrap {
  width: 60%;
  margin: 80px auto;
  position: relative;
}
img {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -125px;
}
.left {
  float: left;
  width: 49%;
}
.right {
  float: right;
  width: 49%;
}
.left:before, .right:before {
  content: "";
  width: 125px;
  height: 250px;
}
.left:before {
  float: right;
}
.right:before {
  float: left;
}

Поделиться:

CSS фигуры

Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.

1. Круг

.d1 {
width: 100px; height: 100px;
background: #83A7C9;
border-radius: 50%;}

2. Овал

.d2 {
width: 200px; height: 100px;
background: #9CD6C0;
border-radius: 100px/50px;}

3. Треугольник вершиной вверх

.d3 {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #24375B;}

4. Треугольник вершиной вниз

.d4 {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #79849B;}

5. Треугольник вершиной влево

.d5 {
width: 0; height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #959FB0;
border-bottom: 50px solid transparent;}

6. Треугольник вершиной вправо

.d6 {
width: 0; height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #D0D4DC;
border-bottom: 50px solid transparent;}

7. Верхний левый угол

.d7 {
width: 0; height: 0;
border-top: 100px solid #68B8AE;
border-right: 100px solid transparent;}

8. Верхний правый угол

.d8 {
width: 0; height: 0;
border-top: 100px solid #82C6BE;
border-left: 100px solid transparent;}

9. Нижний левый угол

.d9 {
width: 0; height: 0; 
border-bottom: 100px solid #BBE1DE;
border-right: 100px solid transparent;}

10. Нижний правый угол

.d10 {
width: 0; height: 0;
border-bottom: 100px solid #CDE5E1;
border-left: 100px solid transparent;}

11. Трапеция

.d11 {
height: 0; width: 100px;
border-bottom: 100px solid #FFE344;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

12. Параллелограмм

.d12 {
margin-left: 20px; width: 150px; height: 100px;
transform: skew(20deg);
background: #D4D5DA;}

13. Шестиугольная звезда

.d13 {
width: 0; height: 0; margin-bottom: 30px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #374F9C;
position: relative;}
.d13:after {
content: "";
width: 0; height: 0;
position: absolute; top: 30px; left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #374F9C;}

14. Пятиугольная звезда

.d14 {
margin: 50px 0; height: 0; width: 0;
position: relative;
border-right: 50px solid transparent;
border-bottom: 35px solid #E7337A;
border-left: 50px solid transparent;
transform: rotate(35deg);}
.d14:before, .d14:after {
content: "";
height: 0; width: 0;
position: absolute;}
.d14:before {
top: -26px; left: -32px;
border-bottom: 40px solid #E7337A;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
transform: rotate(-35deg);}
.d14:after {
top: 2px; left: -53px;
border-right: 50px solid transparent;
border-bottom: 35px solid #E7337A;
border-left: 50px solid transparent;
transform: rotate(-70deg);}

15. Стрелка

.d15 {
width: 60px; height: 20px; margin: 10px 0;
background: #B74388;
position: relative;}
.d15:after{
content: "";
width: 0; height: 0;
position: absolute; top: -10px; left: 100%;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent #B74388;}

16. Шестиугольник

.d16 {
margin: 20px 0; width: 100px; height: 55px;
background: #F1CCAE;
position: relative;}
.d16:before, .d16:after {
content: "";
width: 0; height: 0;
position: absolute; left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}
.d16:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;}
.d16:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;}

17. Восьмиугольник

.d17 {
width: 100px; height: 100px;
background: #54999A;
position: relative;}
.d17:before, .d17:after {
content: "";
width: 42px; height: 0;
position: absolute; left: 0;
border-left: 29px solid white;
border-right: 29px solid white;}
.d17:before {
top: 0;
border-bottom: 29px solid #54999A;}
.d17:after {
bottom: 0;
border-top: 29px solid #54999A;}

18. Сердце

.d18 {
position: relative;
width: 100px; height: 80px;}
.d18:before, .d18:after {
content: "";
position: absolute; left: 50px; top: 0;
width: 50px; height: 80px;
background: #EE4156;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg); transform-origin: 0 100%;}
.d18:after {
left: 0;
transform: rotate(45deg); transform-origin: 100% 100%;}

19. Ромб

.d19 {
width: 0; height: 0;
border: 50px solid transparent;
border-bottom-color: #53BA88;
position: relative; top: -50px;}
.d19:after {
content: "";
width: 0; height: 0;
position: absolute; left: -50px; top: 50px;
border: 50px solid transparent;
border-top-color: #53BA88;}

20. Ромб

.d20 {
margin-bottom: 20px; width: 0; height: 0;
border: 50px solid transparent;
border-bottom: 70px solid #47002D;
position: relative; top: -50px;}
.d20:after {
content: "";
width: 0; height: 0;
position: absolute; left: -50px; top: 70px;
border: 50px solid transparent;
border-top: 70px solid #47002D;}

21. Символ Инь-Ян

.d21 {
width: 100px; height: 50px;
background: white;
border-color: black;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 50%;
position: relative;}
.d21:before, .d21:after{
content: "";
width: 12px; height: 12px;
position: absolute; top: 50%;
border-radius: 50%;}
.d21:before {
left: 0;
background: white;
border: 19px solid black;}
.d21:after {
left: 50%;
background: black;
border: 19px solid white;}

22. Пакман

.d22 {
width: 0; height: 0;
border-right: 60px solid transparent;
border-top: 60px solid #F4B915;
border-left: 60px solid #F4B915;
border-bottom: 60px solid #F4B915;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;}

23. Домик с крышей

.d23 {
height: 55px; width: 100px; margin: 35px 20px 0 0;
background: #B1BA5C;
position: relative;}
.d23:before {
content: "";
height: 0; width: 0;
position: absolute; left: 0; top: -35px;
border-bottom: 35px solid #B1BA5C;
border-left: 50px solid transparent;
border-right: 50px solid transparent;}

24. Крест

.d24 {
background: #CD6D45;
height: 100px; width: 20px;
position: relative; left: 40px;}
.d24:after {
content: "";
height: 20px; width: 100px;
background: #CD6D45;
position: absolute; left: -40px; top: 40px;}

25. Сегмент

.d25 {
width: 0; height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-top: 110px solid #2B2F6E;
border-radius: 50%;}

26. Полумесяц

.d26 {
width: 100px; height: 100px; margin: -20px 0 20px 0;
border-radius: 50%;
box-shadow: 15px 15px 0 0 #FEC712;}

27. Лупа

.d27{
font-size: 10em; /* задает размер иконки */
width: 0.3em; height: 0.3em; margin-bottom: 20px;
border: 0.1em solid #52C8E4;
position: relative;
border-radius: 50%;}
.d27:before {
content: "";
width: 0.3em; height: 0.08em;
position: absolute; right: -0.25em; bottom: -0.1em;
background: #52C8E4;
transform: rotate(45deg);}

28. Шеврон

.d28 {
height: 50px; width: 160px; margin: 6px;
position: relative;}
.d28:before, .d28:after {
content: "";
height: 100%; width: 50%;
position: absolute; top: 0;
background: #F45919;}
.d28:before {
left: 0;
transform: skew(0deg, 10deg);}
.d28:after {
right: 0;
transform: skew(0deg, -10deg);}

29. Ретро-телевизор

.d29 {
width: 100px; height: 80px;
background: #BDE2E0;
border-radius: 50%/10%;
position: relative;}
.d29:before {
content: "";
position: absolute; top: 10%; bottom: 10%; right: -5%; left: -5%;
background: inherit;
border-radius: 5%/50%;}

30. Ленточка

.d30 {
width: 0; height: 0; 
border-width: 50px 30px 20px;
border-style: solid;
border-color: #E95557 #E95557 transparent;}

31. Плоская восьмиконечная звезда

.d31 {
width: 80px; height: 80px; margin: 10px;
background: #82707C;
position: relative;
transform: rotate(20deg);}
.d31:before {
content: "";
height: 80px; width: 80px;
background: inherit;
position: absolute; top: 0; left: 0;
transform: rotate(135deg);}

32. Плоская двенадцатиконечная звезда

.d32 {
width: 80px; height: 80px; margin: 10px;
background: #D7695A;
position: relative;}
.d32:before, .d32:after {
content: "";
height: 80px; width: 80px;
background: inherit;
position: absolute; top: 0; left: 0;}
.d32:before {
transform: rotate(30deg);}
.d32:after {
transform: rotate(60deg);}

33. Облачко комментария

.d33 {
width: 150px; height: 80px; margin-left: 26px;
background: #B5DDD4;
position: relative;
border-radius: 10px;}
.d33:before {
content: "";
width: 0; height: 0;
position: absolute; right: 100%; top: calc(50% - 12px);
border-top: 12px solid transparent;
border-right: 24px solid #B5DDD4;
border-bottom: 12px solid transparent;}

34. Цветок

.d34 {
width: 80px; height: 80px; margin-top: 25px;
background: #EE5E4F; 
position: relative; top: -15px; left: 15px;
border-radius: 8px;}
.d34:before, .d34:after {
content: "";
position: absolute; top: 0; left: 0;
width: 80px; height: 80px; 
background: inherit;
border-radius: 8px;}
.d34:before {
transform: rotate(30deg);}
.d34:after {
transform: rotate(60deg);}

35. Тюльпан

.d35 {
height: 15px; width: 60px;
background: linear-gradient(45deg, #E5556B 50%, transparent 51%), linear-gradient(315deg, #E5556B 50%, transparent 51%);
background-size: 30px 30px;
border-bottom: 40px solid #E5556B;
border-bottom-left-radius: 60%;
border-bottom-right-radius: 60%;}

36. Тюльпан

.d36 {
width: 20px; height: 20px; margin: 0 0 30px 10px;
border: 3px solid #AD1E21;
background: #EB4E48;
position: relative;
transform: rotate(45deg);}  
.d36:before, .d36:after {
content: "";
position: absolute;
width: 30px; height: 50px;
border: 3px solid #AD1E21;
transform: rotate(-45deg);}
.d36:before {
background: #F8D9D1;
border-radius: 0 100% 50% 90%;}
.d36:after {
left: 10px; top: -10px;
background: #F09C9C;
border-radius: 100% 0  90% 50%;}

37. Лепесток

.d37 {
width: 5em; height: 5em; margin: 1em 1em;
background: #02C986;
border-radius: 100% 0;}

38. Цветок из лепестков

.d38 {
width: 2.5em; height: 2.5em; margin: 2em 4.5em 4em;
border-radius: 100% 0;
background: #32336B;
box-shadow: -3em 3em #32336B;
position: relative;}
.d38:before, .d38:after {
content: "";
width: 2.5em; height: 2.5em; margin: 1em 3em;
border-radius: 0 100%;
background: #32336B;
position: absolute; left: -6em; top: -1em;
box-shadow: 3em 3em #32336B;
transform-origin: 2.75em 2.75em;}
.d38:before {
transform: rotate(-30deg);}
.d38:after {
transform: rotate(30deg);}

39. Облако

.d39 {
position: relative;
width: 3em; height: 3em; margin: 2em;
background: #D5DEE9;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;
border-radius: 50% 50% 0 0;}
.d39:before, .d39:after {
content: "";
position: absolute; bottom: -0.25em;
background: inherit;
border-width: 0.25em;
border-style: solid;
border-color: #6E839E;}
.d39:before {
left: 80%; 
width: 60%; height: 60%;
border-left: none;
border-radius: 50% 50% 50% 0;}
.d39:after {
right: 80%;
width: 80%; height: 80%;
border-right: none;
border-radius: 50% 50% 0;}

40. Круг из четырех сегментов

.d40 {
width: 0; height: 0;
background: lightblue;
border-radius: 50%;
border-style: solid;
border-width: 50px;
border-top-color: salmon;
border-right-color: transparent;
border-bottom-color: salmon;
border-left-color: transparent;}

41. Прелоадер

.d41 {
width: 0; height: 0;
margin: 60px;
border: 13px solid transparent;
border-radius:50%;
box-shadow: -30px -30px 0 0 red,
30px 30px 0 0 blue,
-30px 30px 0 0 yellow,
30px -30px 0 0 grey,
0 -45px 0 0 orange,
0 45px 0 0 aqua,
45px 0 0 0 brown,
-45px 0 0 0 crimson;}

42. Прелоадер

.d42 {
width: 100px; height: 100px;
border-radius: 50%;
background: #BCD3DC;
position: relative;}
.d42:after {
content: "";
width: 60px; height: 60px;
position: absolute; left: calc(50% - 30px); top: calc(50% - 30px);
background: #FFD646;
border-radius: 0 50% 50% 50%;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);}

43. Прелоадер

.d43 {
width: 100px; height: 100px;
border: 15px solid #497DDD;  
border-right-color: transparent;
border-radius: 50%;
border-left-color:transparent;
position: relative;}
.d43:after {
content: "";
width: 40px; height: 40px;
border-radius: 50%;
position: absolute; top: calc(50% - 20px); left: calc(50% - 20px);
background: -webkit-radial-gradient(#EF7D55, #F24012);
background: -o-radial-gradient(#EF7D55, #F24012);
background: radial-gradient(#EF7D55, #F24012);}

Поделиться:

Вертикальное меню для сайта

Вертикальное меню делается на основе списка, маркированного или нумерованного. По умолчанию все элементы списка <li>...</li> располагаются вертикально, занимая по ширине всю ширину элемента контейнера <ul>...</ul>, который в свою очередь занимает всю ширину его блока-контейнера.

Элементы списка <li>...</li> могут содержать не только ссылки, но также заголовки, иконки, картинки. С помощью вертикального меню можно оформлять комментарии на сайте, список категорий и т.д.

Перейти на страницу с примерами

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

<div class="widget">
  <h3 class="widget-title">Категории</h3>
  <ul class="widget-list">
    <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>
</div>
* {box-sizing: border-box; margin: 0;}
.widget {
  padding: 20px 30px;
  background: white;
  font-family: 'Roboto', sans-serif;
}
.widget-title {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #222;
  font-size: 16px;
  padding-left: 15px;
  margin-bottom: 15px;
  border-left: 2px solid #b99d61;
}
.widget-list {
  padding: 0;
  list-style: none;
}
.widget-list a:before {
  content: "\2014";
  margin-right: 14px;
}
.widget-list a {
  text-decoration: none;
  outline: none;
  display: block;
  padding: 6px 0; 
  letter-spacing: 1px;
  font-weight: 300;
  color: #444;
  transition: .3s linear;
}
.widget-list a:hover {color: #b99d61;}

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

<ul class="metro">
    <li><a href="">Элемент списка</a>
      <ul>
        <li><a href="">Элемент вложенного списка</a></li>
        <li><a href="">Элемент вложенного списка</a></li>
        <li><a href="">Элемент вложенного списка</a></li>
      </ul>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
</ul>
.metro {
  list-style: none;
  padding: 0;
  margin: 30px 0 0 50px;
  border-left: 5px solid #DAE4F1;
}
.metro li {line-height: 2em;}
.metro ul {
  margin: 20px 0 20px 15px;
  padding: 0;
  border: none;
  list-style: none;
}
.metro ul:before, .metro ul:after {
  content: "";
  width: 5px;
  height: 28px;
  background: #DAE4F1;
  position: relative;
  display: block;
  left: -9px;
}
.metro ul:before {
  transform: rotate(-45deg);
  margin-top: -15px;
}
.metro ul:after {
  transform: rotate(45deg);
  bottom: -20px;
}
.metro ul li {border-left: 5px solid #DAE4F1;}
.metro ul li:first-child {
  margin-top: -5px;
  padding-top: 5px;
}
.metro ul li:last-child {
  padding-bottom: 9px;
  margin-bottom: -25px;
}
.metro a {
  text-decoration: none;
  display: block;
  font-family: 'Noto Sans', sans-serif;
  color: #4A4B4D;
}
.metro a:before {
  content: "";
  display: inline-block;
  background: #CA682D;
  width: 12px;
  height: 12px;
  left: -9px;
  position: relative;
  border-radius: 50%;
  margin-right: .5em;
}

3. Вертикальное меню с эффектами при наведении

Иконка и фоновая заливка, проявляющиеся при наведении на элемент списка, помогут разнообразить дизайн элементов вертикального меню.

<div class="category-wrap">
  <h3>Категории</h3>
  <ul>
    <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>
</div>
.category-wrap {
  padding: 15px;
  background: white;
  width: 200px;
  box-shadow: 2px 2px 8px rgba(0,0,0,.1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.category-wrap h3 {
  font-size: 16px;
  color: rgba(0,0,0,.6);
  margin: 0 0 10px;
  padding: 0 5px;
  position: relative;
}
.category-wrap h3:after {
  content: "";
  width: 6px;
  height: 6px;
  background: #80C8A0;
  position: absolute;
  right: 5px;
  bottom: 2px;
  box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0;
}
.category-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0; 
  border-top: 1px solid rgba(0,0,0,.3);
}
.category-wrap li {margin: 12px 0 0 0px;}
.category-wrap a {
  text-decoration: none;
  display: block;  
  font-size: 13px;
  color: rgba(0,0,0,.6);
  padding: 5px;
  position: relative;
  transition: .3s linear;
}
.category-wrap a:after {
  content:"\f18e";
  font-family: FontAwesome;
  position: absolute;
  right: 5px;
  color: white;
  transition: .2s linear;
}
.category-wrap a:hover {
  background: #80C8A0;
  color: white;
}

4. Вертикальное меню с иконками

Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

<div class="widget">
  <h3>Категории</h3>
  <ul>
    <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>
</div>
* {box-sizing: border-box; margin: 0;}
.widget {
  padding: 20px;
  border: 5px solid #f1f1f1;
  background: #fff;
  border-radius: 5px;
  font-family: 'Roboto', sans-serif;
}
.widget h3 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: normal;
  color:  #424949;
}
.widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 250px;
}
.widget li {
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.widget li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.widget a {
  text-decoration: none;
  color:  #616a6b;
  display: inline-block;
}
.widget li:before {
  font-family: FontAwesome;
  font-size: 20px;
  vertical-align:bottom;
  color: #dd3333; 
  margin-right: 14px;
}
.widget li:nth-child(1):before {content:"\f1fc";}
.widget li:nth-child(2):before {content:"\f0d0";}
.widget li:nth-child(3):before {content:"\f0cd";}
.widget li:nth-child(4):before {content:"\f028";}
.widget li:nth-child(5):before {content:"\f03d";}

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

<div class="col">
  <h3 class="widget-title">Распродажа</h3>
  <div class="price-line">
    <div class="product-image">
      <a href=""><img src="https://html5book.ru/wp-content/uploads/2017/03/sport1.jpeg"></a>
    </div>
    <div class="product-content">
      <div class="product-title"><a href="">Продукт 1</a></div>
      <div class="star-rating">&nbsp;</div>
      <div class="price-box"><span>₽ 2000</span></div>
    </div>
  </div>
  <div class="price-line">
    <div class="product-image">
      <a href=""><img src="https://html5book.ru/wp-content/uploads/2017/03/sport2.jpeg"></a>
    </div>
    <div class="product-content">
      <div class="product-title"><a href="">Продукт 2</a></div>
      <div class="star-rating">&nbsp;</div>
      <div class="price-box"><span>₽ 2500</span></div>
    </div>
  </div>
  <div class="price-line">
    <div class="product-image">
      <a href=""><img src="https://html5book.ru/wp-content/uploads/2017/03/sport3.jpeg"></a>
    </div>
    <div class="product-content">
      <div class="product-title"><a href="">Продукт 3</a></div>
      <div class="star-rating">&nbsp;</div>
      <div class="price-box"><span>₽ 2070</span></div>
    </div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
.col {
  width: 300px;
  background: white;
  padding: 20px;
  border: 1px solid #eeeeee;
  font-family: 'Open Sans', sans-serif;
}
.col * {margin: 0;}
.widget-title {
  margin: 0 0 30px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px;
  color: #242424;
  overflow: hidden;
}
.widget-title:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;  
  right: -15px;
  margin-right: -100%;
  border-top: 2px solid #cca86d;   
}
.price-line {margin-bottom: 20px;}
.price-line:last-child {margin-bottom: 0;}
.price-line:after {
  content: "";
  display: table;
  clear: both;
}
.product-image {
  width: 80px;
  float: left;
}
.product-image a {
  display: block;
  outline: none;
}
.product-image img {
  display: block;
  width: 100%;
}
.product-content {
  float: left;
  margin-left: 20px;
}
.product-title {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1;
}
.product-title a {
  text-decoration: none;
  color: #242424;
}
.price-box {
  color: #666;
  font-size: 18px;
  line-height: 1;
}
.star-rating {
  margin-bottom: 10px;
  font-size: 13px;
  position: relative;
  font-family: 'FontAwesome';
}
.star-rating:before {
  content: "\f005 \f005 \f005 \f005 \f005";
  position: absolute;
  top: 0;
  left: 0;
  color: #FF9919;
}

Поделиться: