Публикую не столько для копирования кода. Сколько для того, чтобы аналитики вдохновились идеями для оформления страниц
HTML-списки представляют собой набор вертикально ориентированных блочных элементов. Элементы списка <li> могут содержать другие элементы, например, ссылки <a>, изображения <img>, абзацы <p> и т.д.
Пример 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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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;
}
