Красивые градиенты

Градиентные заливки по умолчанию занимают всю площадь элемента. Управляя размером заливки с помощью свойства background-size и положением с помощью background-position, можно создавать красивые узоры.

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

1. Фестоны

div {
height: 200px;
background: radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 190px, 
radial-gradient(#FBB03B 0%, #FBB03B 50%, #8AD4E1 50%, #8AD4E1 70%, white 70%, white 100%) 0 -10px;
background-size: 20px 20px;
background-repeat: repeat-x;
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.2), -1px -1px 2px 0 rgba(0,0,0,.2);
}

2. Диагональный узор

div {
background: linear-gradient(45deg, #CBDDEB, #CBDDEB 50%, #527383 50%);
background-size: 50px 50px;
}

3. Диагональный узор

div {
background: linear-gradient(135deg, #FABFB2, #FABFB2 25%, #FCA699 25%);
background-size: 20px 20px;
}

4. Градиентные границы

div {
background-color: #9097A2;
}
h4 {
padding: 30px 0;
color: white;
font-size: 40px;
position: relative;
margin: 0;
transform: translate(-50%, -50%);
top: 50%; 
left: 50%;  
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.3) 40%, rgba(211, 212, 218, 0.3) 60%, rgba(211, 212, 218, 0));
}
h4:before {
width: 100%;
height: 2px;
position: absolute;
left: 0;
top: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}
h4:after {
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
content: "";
background-image: linear-gradient(to right, rgba(211, 212, 218, 0), rgba(211, 212, 218, 0.8) 40%, rgba(211, 212, 218, 0.8) 60%, rgba(211, 212, 218, 0));
}

5. Крупная клетка

div {
background-image:
linear-gradient(#98B7AF 1px, transparent 1px),
linear-gradient(90deg, #98B7AF 1px, transparent 1px);
background-size: 2em 2em;
background-color: white; 
}

6. Горох

div {
background-color: white;
background-image: radial-gradient(#9ed8d3 5px, transparent 5px);
background-size: 30px 30px;
}

7. Радиальный градиент

div {
background-color: #e61f59;
background-image: radial-gradient(ellipse farthest-corner at right bottom, #ADC0CE 0%, #E61F59 50%, #E4E4E4 100%);
}

8. Плитка

div {
background-color: #DDD7D7;
background-size: 50px 50px;
background-image: 
linear-gradient(-45deg, transparent 52%, rgba(255,255,255,0.9) 54%, transparent 55%, transparent),
linear-gradient(45deg, transparent 52%, rgba(255,255,255,0.6) 54%, transparent 55%, transparent),
linear-gradient(-45deg, transparent 50%, rgba(0,0,0,0.1) 52%, transparent 53%, transparent),
linear-gradient(45deg, transparent 50%, rgba(0,0,0,0.05) 52%, transparent 53%, transparent);
}

9. Узор-купон

div {
background-color: #F2D95D;
background-image: radial-gradient(#7F7E7F 76%, transparent 0),
radial-gradient(#7F7E7F 72%, transparent 0),
radial-gradient(#7F7E7F 68%, transparent 0),
radial-gradient(#7F7E7F 64%, transparent 0),
radial-gradient(#7F7E7F 60%, transparent 0),
radial-gradient(#7F7E7F 56%, transparent 0),
radial-gradient(#7F7E7F 52%, transparent 0),
radial-gradient(#7F7E7F 48%, transparent 0),
radial-gradient(#7F7E7F 44%, transparent 0),
radial-gradient(#7F7E7F 40%, transparent 0),
radial-gradient(#7F7E7F 36%, transparent 0),
radial-gradient(#7F7E7F 32%, transparent 0),
radial-gradient(#7F7E7F 28%, transparent 0),
radial-gradient(#7F7E7F 24%, transparent 0);  
background-size: 1em 1em;
background-repeat: repeat-y;
background-position: 0 0, 1em 0, 2em 0, 3em 0, 4em 0, 5em 0, 6em 0, 7em 0, 8em 0, 9em 0, 10em 0, 11em 0, 12em 0, 13em 0;
}

10. Ретро лучи

div {
background:
linear-gradient(170deg, transparent 80%, #91CBCF 30%) ,
linear-gradient(156deg, transparent 68%, #E3D9C3 30%),
linear-gradient(135deg, transparent 60%, #91CBCF 30%),
linear-gradient(115deg, transparent 55%, #E3D9C3 30%),
linear-gradient(65deg, transparent 45%, #91CBCF 30%),
linear-gradient(45deg, transparent 40%, #E3D9C3 30%),
linear-gradient(24deg, transparent 32%, #91CBCF 30%),
linear-gradient(10deg, transparent 20%, #E3D9C3 20%),
linear-gradient(0deg, transparent 0%,  #91CBCF 0%);
background-position: center;
background-size: 100% 100%;
}

11. Елочный узор

div {
background-size: 48px 18px;
background-color: #CBCFD1;
background-image: 
linear-gradient(90deg, #607584 1%, transparent 2%), 
linear-gradient(45deg, transparent 7%, #607584 10%, transparent 10%, transparent 35%, #607584 37%, transparent 33%), 
linear-gradient(-45deg, transparent 8%, #E6EBED 10%, transparent 10%, transparent 35%, #E6EBED 37%, transparent 33%);
}

12. Соты

div {
background-color: #f76;
background-image:
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(-30deg, #fee 13.5%, transparent 13.5%, transparent 86.5%, #fee 86.5%),
linear-gradient(30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(-30deg, #dcc 13.5%, transparent 13.5%, transparent 86.5%, #dcc 86.5%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%),
linear-gradient(45deg, #544 25%, transparent 25%, transparent 75%, #544 75%);
background-position: 0 2em, 0 2em, 2em 4em, 2em 4em, 4em 2em, 4em 2em, 6em 4em, 6em 4em, 0 0, 2em 2em;
background-size: 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 8em 4em, 4em 4em, 4em 4em;
}

13. Ромбы

div {
background-color:#1E3A52;
background-image: 
linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(30deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(150deg, #83C5E5 12%, transparent 12.5%, transparent 87%, #83C5E5 87.5%, #83C5E5),
linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568), 
linear-gradient(60deg, #FE5568 25%, transparent 25.5%, transparent 75%, #FE5568 75%, #FE5568);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;
}

14. Цветные полосы

div {
background-image: linear-gradient(85deg, #B7AE9D 10%, #ACCECD 10%, #ACCECD 20%, white 20%, white 30%, #544E3E 30%, #544E3E 40%, #8A151B 40%, #8A151B 50%, #B7AE9D 50%, #B7AE9D 60%, #ACCECD 60%, #ACCECD 70%, white 70%, white 80%, #544E3E 80%, #544E3E 90%, #8A151B 90%);
}

15. Цветные полосы

div {
background-color: #81D4EC;
background-image: linear-gradient(182deg, #ED7B9C 32%, transparent 32%), linear-gradient(178deg, #EBEBEB 62%, transparent 62%);
}

16. Прозрачная основа

div {
background-color: white;
background-image: 
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%), 
linear-gradient(45deg, #cccccc 25%, transparent 25%, transparent 75%, #cccccc 75%);
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
}

17. Узор-зигзаг

div {
background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, 
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, 
linear-gradient(315deg, #ECEDDC 25%, transparent 25%), 
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 100px 100px;
background-color: #F4CF24;
}

18. Ретро полосы

div {
background-image: 
linear-gradient(135deg, transparent 84px, #d95b43 84px, #d95b43 100px, #ecd078 100px, #ecd078 106px, #c02942 106px, #c02942 120px, #ecd078 121px, #ecd078 127px, #542437 127px, #542437 142px, #ecd078 142px, #ecd078 148px, #53777a 148px, #53777a 163px, #ecd078 163px, #ecd078 168px, #d95b43 169px), 
linear-gradient(135deg, #d95b43 15px, #d95b43, #ecd078 15px, #ecd078 21px, #c02942 21px, #c02942 36px, #ecd078 36px, #ecd078 42px, #542437 42px, #542437 57.5px, #ecd078 57px, #ecd078 63px, #53777a 63px, #53777a 78px, #ecd078 78px, #ecd078 84px, transparent 84px, transparent 99px);
background-size: 120px 120px;
}

19. Стразы

div {
background-color: white;
background-image: 
linear-gradient(white 25%, transparent 25%), 
linear-gradient(90deg, white 25%, transparent 25%), 
linear-gradient(transparent 75%, #d4d3d8 75%), 
linear-gradient(90deg, transparent 75%, #eff0ea 75%), 
linear-gradient(#eff0ea 50%, transparent 50%), 
linear-gradient(90deg, #d4d3d8 50%, transparent 50%);
background-size: 20px 20px;
}

20. Мозаичная плитка

div {
background-color: #5371B3;
background-image: 
linear-gradient(#eeeeee 25%, transparent 25%), 
linear-gradient(90deg, #eeeeee 25%, transparent 25%);
background-size: 8px 8px;
}

21. Кирпичный узор

div {
background: 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px -37px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 111px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 37px, 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 37px 37px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 0px, 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 0px, 
linear-gradient(135deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 74px, 
linear-gradient(225deg, transparent 24.5%, #449CB4 24.6%, transparent 24.8%) 74px 74px;
background-size: 148px 148px;
background-color: #E8F4F2;
}

22. Сетка

div {
background: 
radial-gradient(ellipse farthest-corner, transparent 0%, transparent 35%, white 30%, white 40%, transparent 90%), 
radial-gradient(ellipse farthest-corner at 0 0, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), 
radial-gradient(ellipse farthest-corner at 8px 8px, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), radial-gradient(ellipse farthest-corner at 0 8px, transparent 0%, transparent 20%, white 15%, white 20%, transparent 40%), radial-gradient(ellipse farthest-corner at 8px 0, transparent 0%, transparent 20%, white 15%, white 20%, transparent 50%), linear-gradient(40deg, #AC394A 0%, #DC625F 30%, #EB7D5C 50%, #DC625F 70%, #AC394A 100%);
background-size: 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 100% 100%;
}

23. Мозаичный узор

div {
background-color: #EEE2DB;
background-image:
linear-gradient(45deg,#ECD9D3 25%, transparent 25%, transparent 75%, #EBC4B8 75%),
linear-gradient(-45deg,#ECA797 25%, transparent 25%, transparent 75%, #E98A74 75%);
background-position: 0 0, 1em 1em;
background-size: 2em 2em, 2em 2em;
}

24. Мелкий зигзаг

div {
background-image: 
linear-gradient(-45deg, transparent 2px, #D1C7BF 2px, transparent 3px), 
linear-gradient(45deg, transparent 2px, #D1C7BF 2px, transparent 3px);
background-size: 6px 6px;
}

25. Ромбы

div {
background-color: #AACCBE;
background-image: 
linear-gradient(45deg, #DB1F04 25%, transparent 25%, transparent 75%, #DB1F04 75%, #DB1F04), 
linear-gradient(-45deg, #DB1F04 25%, transparent 25%, transparent 75%, #DB1F04 75%, #DB1F04);
background-size: 60px 60px;
}

26. Клетка

div {
background-color: #DEE2E5;
background-image: 
linear-gradient(transparent 99px, white 99px), 
linear-gradient(90deg, transparent 99px, white 99px), 
linear-gradient(transparent 19px, rgba(255, 255, 255, 0.3) 19px), 
linear-gradient(90deg, transparent 19px, rgba(255, 255, 255, 0.3) 19px);
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

27. Пиксельный узор

div {
background-image: 
repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
}

28. Тетрадный лист

div {
background-color: #f9f9f9;
background-image:linear-gradient(#4C596C, transparent 1px);
background-size: 1.5em 1.5em;  
box-shadow: 1px 1px 2px rgba(0,0,0,.2), -1px -1px 2px rgba(0,0,0,.2);
}
div:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #F54318;
position: relative;
left: 40px;
}

29. Горошек

div {
background: radial-gradient(#ffaf2f 2px, transparent 1px);
background-size: 20px 20px;
}

30. Цветочный узор

div {
background-color: white;
background-image: 
radial-gradient(transparent 40%, white 50%), 
radial-gradient(transparent 40%, #EF3641 40%);
background-size: 30px 30px, 20px 20px;
}

31. Зигзаг

div {
position: relative;
background: #D8E6F3;
margin: 14px 0;
}
div:before {
content: "";
height: 14px;
position: absolute;
left: 0;
right: 0;
top: -14px;
background: linear-gradient(45deg, #D8E6F3 25%, transparent 25%), linear-gradient(315deg, #D8E6F3 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%) -7px 0, linear-gradient(135deg, white 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #AFCDE7;
}
div:after {
content: "";
height: 14px;
position: absolute;
left: 0;
right: 0;
bottom: -14px;
background: linear-gradient(135deg, #D8E6F3 25%, transparent 25%), linear-gradient(225deg, #D8E6F3 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%) -7px 0, linear-gradient(45deg, white 25%, transparent 25%) -7px 0;
background-size: 14px 14px;
background-color: #AFCDE7;
}

32. “Страусиная кожа”

div {
background-color: #E4EFD1;
background-image:
radial-gradient(#FEFFFE 2px, transparent 3px, transparent 5px, #BAD78B 6px),
linear-gradient(#A6CC69 2px, transparent 4px, transparent 5px, #74924C 7px);
background-position: 0 0, 1em 1em;
background-size: 2em 2em, 2em 2em;
}

33. Клетчатый узор

div {
background-color: #ececea;
background-image: 
linear-gradient(to right, rgba(63, 75, 138, .7) 0, rgba(63, 75, 138, .7) 10px, transparent 10px, transparent 20px), 
linear-gradient(to top, rgba(63, 75, 138, .4) 0, rgba(63, 75, 138, .4) 10px, transparent 10px, transparent 20px);
background-size: 20px 20px;
}

34. Капли

div {
background: 
linear-gradient(70deg, #9B8A77 0.9em,transparent 1em), 
linear-gradient(-70deg, #9B8A77 0.9em, transparent 1em), 
radial-gradient(#9B8A77 0.9em, transparent 1em), 
linear-gradient(70deg, #47403A 0.9em, transparent 1em), 
linear-gradient(-70deg, #47403A 0.9em, transparent 1em), 
radial-gradient(#47403A 0.9em, transparent 1em);
background-position: 3em -3em,  -3em -3em, 0 0,  0 0,  0 0,  3em 3em;
background-size: 6em 6em;
background-color: #F0DFCA;
background-repeat: repeat;
font-size: 12px;
}

35. Тонкие диагональные полоски

div {
background-image: 
linear-gradient(-45deg, transparent 50%, #F1D0CB 50%, #F1D0CB 60%, transparent 60%), 
linear-gradient(-45deg, #F1D0CB 10%, transparent 10%);
background-color: #FCFAFB;
background-size: 1em 1em;
}

36. Узор-елочка

div {
background:
linear-gradient(to left bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0, 
linear-gradient(to right top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0, 
linear-gradient(to left bottom, transparent 0.4em, #623D56 0.4em, #623D56 1em, transparent 0.4em) 0 1.02em, 
linear-gradient(to right top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em,
linear-gradient(to right bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0, 
linear-gradient(to left top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0, 
linear-gradient(to right bottom, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 0 1.02em, 
linear-gradient(to left top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em;
background-size: 4em 4em;
background-color: #F1E9D2;
background-repeat: repeat;
}

37. Диагональные полосы

div {
background-image: 
linear-gradient(-45deg, transparent 40%, rgba(255,97,94,.7) 40%, rgba(255,97,94,.7) 60%, transparent 60%), 
linear-gradient(135deg, rgba(255,97,94,.7) 10%, transparent 10%),
linear-gradient(-45deg, rgba(255,97,94,.7) 10%, transparent 10%),
linear-gradient(45deg, transparent 40%, #FFC45C 40%, #FFC45C 60%, transparent 60%),
linear-gradient(45deg, #FFC45C 10%, transparent 10%),linear-gradient(-135deg, #FFC45C 10%, transparent 10%);
background-color: #FCFAFB;
background-size: 2em 2em;
}

38. Диагональная клетка

div {
background: 
repeating-linear-gradient(45deg, transparent, transparent 1em, #5A9C6E 0, #5A9C6E 2em,
transparent 0, transparent 3em, #A8BF5A 0, #A8BF5A 4em,
transparent 0, transparent 5em, #FAC46E 0, #FAC46E 6em,
transparent 0, transparent 7em, #FAD5BB 0, #FAD5BB 8em),
repeating-linear-gradient(-45deg,transparent, transparent 1em, #A8BF5A 0,#A8BF5A 2em,
transparent 0, transparent 3em, #FAD5BB 0, #FAD5BB 4em,
transparent 0, transparent 5em, #FAC46E 0, #FAC46E 6em), #F2FEFF;
background-blend-mode: multiply;
}

Поделиться:

CSS таблицы цен

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

Весь код вы можете скопировать из вкладок HTML и CSS встроенного редактора CODEPEN.

See the Pen JRYJyK by Elena (@html5book) on CodePen.

See the Pen rrOwwE by Elena (@html5book) on CodePen.

See the Pen bwVRRx by Elena (@html5book) on CodePen.

Поделиться:

Примеры оформления первой буквы абзаца

first-letter-first-line

CSS даёт возможность форматирование абзаца с использованием псевдоэлементов :first-letter и :first-line. Можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца.

/*первый абзац*/
p:first-letter {
  font-size: 2em;
  margin-right: 2px; 
  color: #EE9966;
  font-weight: bold;
  text-shadow: -1px -1px 1px white, 1px 1px 1px #9E9D99;
}
p:first-line {color: #EE9966;}
/*второй абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  border-radius: 50% 0;
  font-weight: bold;
}
/*третий абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 5px 10px;
  margin-right: 5px; 
  margin-bottom: 2px;
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
}
/*четвертый абзац*/
p:first-letter {
  font-size: 1.2em;
  padding: 3px 10px;
  margin-right: 5px; 
  background: #EE9966;
  color: #FAF4F4;
  float: left;
  font-weight: bold;
  border-radius: 50%;
}
/*пятый абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: #FAF4F4;
  border: 6px double;
  color: #EE9966;
  float: left;
  font-weight: bold;
}
/*шестой абзац*/
p:first-letter{
  font-size: 1.5em;
  padding: 2px 10px;
  margin-right: 5px; 
  background: url(https://html5book.ru/wp-content/uploads/2015/01/border-orange.png);
  border: 2px solid #EE9966;
  color: #544E3E;
  float: left;
  font-weight: bold;
  box-shadow: 1px 1px 1px #9E9D99;
}

Поделиться:

Примеры красивого оформления списков

HTML-списки представляют собой набор вертикально ориентированных блочных элементов. Элементы списка <li> могут содержать другие элементы, например, ссылки <a>, изображения <img>, абзацы <p> и т.д.

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

Пример 1.

list-style-1

<ol class="rounded">
  <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>
.rounded {
counter-reset: li; 
list-style: none; 
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rounded a {
position: relative;
display: block;
padding: .4em .4em .4em 2em;
margin: .5em 0;
background: #DAD2CA;
color: #444;
text-decoration: none;
border-radius: .3em;
transition: .3s ease-out;
}
.rounded a:hover {background: #E9E4E0;}
.rounded a:hover:before {transform: rotate(360deg);}
.rounded a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background: #8FD4C1;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid white;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}

Пример 2.

list-style-2

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

Пример 3.

list-style-3

<ul class="border">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ul>
.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;}

Пример 4.

list-style-4

<ul class="first">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ul>
.first  {
list-style: none;
padding: 0;
}
.first li {
padding: 10px 30px;
background: linear-gradient(to left, #f8ab8d 0%, white, #f8ab8d);
border-bottom: 1px solid grey;
color: #506a6b;
font-size: 20px;
box-shadow: 0 5px 5px 0 rgba(0,0,0, .2);
margin-bottom: 5px;
}
.first li:last-child {border-bottom: none;}

Пример 5.

list-style-5

<ul class="menu">
  <li>Салаты</li>
  <li><span>"Греческий"</span><em>320</em></li>
  <li><span>"Цезарь"</span><em>430</em></li>
  <li><span>"Теплый салат с куриной печенью"</span><em>300</em></li>
  <li><span>"Оливье"</span><em>350</em></li>
  <li><span>"Морской"</span><em>450</em></li>
</ul>
.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;
}

Пример 6.

list-style-6

<ul class="dbl-border">
  <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>
.dbl-border {
list-style: none;
margin: 0;
}
.dbl-border li {
margin: 10px 0;
position: relative;
}
.dbl-border a {
width: 100%;
color: #808285;
text-decoration: none;
border-left: 6px solid #ABC7EA;
display: block;
padding-left: 25px;
height: 44px;
line-height: 44px;
font-size: 20px;
position: relative;
transition: 0.3s linear;
}
.dbl-border a:before {
content: "";
width: 6px;
height: 70%;
background: #EE997C;
position: absolute;
top: 15%;
left: -12px;
}
.dbl-border li:before {
content: "";
width: 6px;
height: 40%;
background: #EFDD89;
position: absolute;
top: 30%;
left: -12px;
}
.dbl-border a:hover {background: #D4D8D9;}

Пример 7.

list-style-7

<ol class="ball">
  <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>
.ball {
list-style: none;
margin: 0;
}
.ball a {
width: 100%;
color: #808285;
text-decoration: none;
display: inline-block;
padding-left: 25px;
height: 44px;
line-height: 44px;
font-size: 20px;
position: relative;
transition: .3s linear;
}
.ball a:before {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background: #425273;
position: absolute;
left: -30px;
top: 7px;
}
.ball li {position: relative;}
.ball li:before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background: #EC351D;
position: absolute;
top: 12px;
left: -30px;
z-index: 2;
transition: .4s ease-in-out;
}
.ball li:hover:before {left: -20px;}

Пример 8.

list-style-8

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

Пример 9.

list-style-9

<ul class="dotted">
<li><span>Биг Мак</span><span>99 Р</span></li>
<li><span>Роял Де Люкс</span><span>112 Р</span></li>
<li><span>Картофель фри</span><span>42 Р</span></li>
<li><span>Coca Cola 0,25</span><span>48 Р</span></li>
<li><span>Латте</span><span>92 Р</span></li>
</ul>
.dotted {
list-style: none;
font-family: 'Marck Script', cursive;
}
.dotted li {
margin-bottom: 5px;
border-bottom: 2px #404B51 dotted;
font-size: 26px;
line-height: 1;
}
.dotted li span:nth-child(odd) {
padding-right: 6px; 
color: #404B51;
}
.dotted li span:nth-child(even) {
float: right; 
padding-left: 6px;
color: #35D1CE;
}
.dotted span {
background: white;
position: relative;
bottom: -7px;
}

Пример 10.

list-style-10

<ol class="bullet">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ol>
.bullet {
margin-left: 0;
list-style: none;
counter-reset: li;
}
.bullet li {
position: relative;
margin-bottom: 1.5em;
border: 3px solid #CADFCF;
padding: 0.6em;
border-radius: 4px;
background: #FEFEFE;
color: #231F20;
font-family: "Trebuchet MS", "Lucida Sans";
}
.bullet li:before {
position: absolute;
top: -0.7em;
padding-left: 0.4em;
padding-right: 0.4em;
font-size: 16px;
font-weight: bold;
color: #DCC24B;
background: #FEFEFE;
border-radius: 50%;
counter-increment: li;
content: counter(li);
}

Пример 11.

list-style-11

<ol class="pills">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ol>
.pills {
  margin-left: 0;
  list-style: none;
  counter-reset: li;
  font-family: calibri;
}
.pills li {
  padding: 10px 0;
  position: relative;
  left: 1.5em;
  margin-bottom: 0.75em;
  padding-left: 1em;
  background: #E3DEDC;
}
.pills li:before {
  padding: 10px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.5em;
  width: 1.875em;
  text-align: center;
  color: white;
  font-weight: bold;
  background: #D66786;
  border-bottom-left-radius: 70em;
  border-top-left-radius: 70em;
  counter-increment: li;
  content: counter(li);
}

Пример 12.

list-style-12

<ol class="square">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ol>
.square {
  margin: 0;
  counter-reset: li;
  list-style: none;
  background:#E8E8E8;
  padding: 10px;
}
.square li {
  position: relative;
  margin: 0 0 10px 2em;
  padding: 4px 8px;
  border-top: 2px solid #787A77;
  transition: .3s linear;
}
.square li:last-child {margin-bottom: 0;}
.square li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  top: -2px;
  left: -2em;
  width: 2em;
  box-sizing: border-box;
  margin-right: 8px;
  padding: 4px;
  border-top: 2px solid #787A77;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  background: #787A77;
  color: white;
  font-weight: bold;
  text-align: center;
  transition: .3s linear;
}
.square li:hover {border-top: 2px solid #389F70;}
.square li:hover:before {
  border: 2px solid #389F70;
  background: #98EABA;
}

Пример 13.

list-style-13

<ul class="zebra">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ul>
.zebra {
  list-style: none;
  border-left: 10px solid #FC7574;
  padding: 0;
  font-family: "Lucida Sans";
}
.zebra li {padding: 10px;}
.zebra li:nth-child(odd) {background: #E1F1FF;}
.zebra li:nth-child(even) {background: white;}

Пример 14.

list-style-14

<ul class="push">
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
</ul>
.push {
  list-style: none;
  font-family: "Lucida Sans";
}
.push li {
  position: relative;
  padding: 20px 0 20px 40px;
  color: #D29D25;
  font-variant: small-caps;
  font-weight: bold;
  cursor: pointer;
}
.push li:before {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4F5151;
  content: "";
  left: 0;
  transition: .3s ease-in-out;
  top: 27px;
}
.push li:after {
  position: absolute;
  border-left: 1px dotted #4F5151;
  width: 1px;
  bottom: -12px;
  content: "";
  left: 3px;
  top: 48px;
}
.push li:hover:before{box-shadow: 0 0 0 10px rgba(0,0,0,.2)}
.push li:last-child:after {content: none;}

Пример 15.

list-style-15

<dl class="holiday">
  <dt>1.04.15</dt>
    <dd>День смеха</dd>
  <dt>4.04.15</dt>
    <dd>День веб-мастера</dd>
  <dt>5.04.15</dt>
    <dd>День геолога</dd>
  <dt>7.04.15</dt>
    <dd>День рождения РУНЕТА</dd>
</dl>
.holiday {
  overflow: hidden;
  font-size: 16px;
}
.holiday dt, .holiday dd {
  height: 2.5em;
  line-height: 2.5em;
  padding: 0 0.625em 0 0.875em;
  color: #4C565C;
  box-sizing: border-box;
}
dt {
  width: 30%;
  float: left;
  clear: right;
  background: #D3E6DD;
  font-weight: bold;
}
dd {
  width: 70%;
  float: right;
  margin-left: 0;
  margin-bottom: .3125em;
  border: 1px solid #BECFC7;
  border-left: none;
}

Пример 16.

list-style-16

<ul class="older">
  <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>
@import url(http://fonts.googleapis.com/css?family=Fredericka+the+Great|EB+Garamond);
.older {
  list-style: none;
  margin: 0 auto;
  width: 660px;
  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);
}

Пример 17.

list-example-17

<ul class="category-list">
  <li><a href="">Видео</a><span>5</span></li>
  <li><a href="">Фотошоп</a><span>3</span></li>
  <li><a href="">Дизайн</a><span>2</span></li>
  <li><a href="">Путешествия</a><span>2</span></li>
  <li><a href="">Музыка</a><span>2</span></li>
</ul>
.category-list * {transition: .4s linear;}
.category-list {
  background: white;
  list-style-type: circle;
  list-style-position: inside;
  padding: 0 10px;
  margin: 0;
}
.category-list li {
  font-family: "Trebuchet MS", "Lucida Sans";
  border-bottom: 1px solid #efefef;
  padding: 10px 0;
}
.category-list a {
  text-decoration: none;
  color: #555;
}
.category-list li span {
  float: right;
  display: inline-block;
  border: 1px solid #efefef;
  padding: 0 5px;
  font-size: 13px;
  color: #999;
}
.category-list li:hover a {color: #c93961;}
.category-list li:hover span {
  color: #c93961;
  border: 1px solid #c93961;
}

Поделиться: