5 различных списков на CSS, которые можно использовать в своих проектах

В этой статье представлены 5 различных дизайнов неупорядоченных списков, которые при задании определённых стилей будут выглядеть просто супер

1. Список на основе шрифтов, использующий только текст. Достаточно простой, но с элегантным дизайном. При наведение на элемент списка он будет увеличиваться.
Список на основе шрифтов
HTML код

<div>
  <h2>HelvetiList</h2>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a></li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

CSS стиль

div {
  width: 200px;
}
 
h2 {
  font: 400 40px/1.5 Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
}
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li {
  font: 200 20px/1.5 Helvetica, Verdana, sans-serif;
  border-bottom: 1px solid #ccc;
}
 
li:last-child {
  border: none;
}
 
li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 200px;
 
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
 
li a:hover {
  font-size: 30px;
  background: #f6f6f6;
}

2. Второй список включает не только текст, но и миниатюры изображений. Так что у вас появится возможность создавать последовательные блоки с визуальной и текстовой информацией.
Второй список
HTML код

<div>
  <ul>
    <li>
      <img src="http://lorempixum.com/100/100/nature/1">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
       
    <li>
      <img src="http://lorempixum.com/100/100/nature/2">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/3">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
 
    <li>
      <img src="http://lorempixum.com/100/100/nature/4">
      <h3>Headline</h3>
      <p>Lorem ipsum dolor sit amet...</p>
    </li>
  </ul>
</div>

CSS стиль

* {margin: 0; padding: 0;}
 
div {
  margin: 20px;
}
 
ul {
  list-style-type: none;
  width: 500px;
}
 
h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}
 
li img {
  float: left;
  margin: 0 15px 0 0;
}
 
li p {
  font: 200 12px/1.5 Georgia, Times New Roman, serif;
}
 
li {
  padding: 10px;
  overflow: auto;
}
 
li:hover {
  background: #eee;
  cursor: pointer;
}

3. Мини галерея, которая реализуется при помощи простого списка, каждый элемент которого представлен в виде изображения 150 на 150 пикселей. Главное здесь правильно подобрать отступы от блоков, чтобы они не наезжали друг на друга.
Мини галерея
HTML код

<div>
  <ul>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
    <li><a href="#"><img src="http://placehold.it/150x150"></a></li>
  </ul>
</div>

CSS стиль

* {
  margin: 0;
  padding: 0;
}
 
body {
  background: #333;
}
 
div {
  width: 900px;
  margin: 0 auto;
  overflow: auto;
}
 
ul {
  list-style-type: none;
}
 
li img {
  float: left;
  margin: 10px;
  border: 5px solid #fff;
 
  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}
 
li img:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

4. Простое стандартное горизонтальное меню, каждый элемент которого изменяет свой цвет при наведении мыши.
Простое стандартное горизонтальное меню
HTML код

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS стиль

* {
  margin: 0;
  padding: 0;
}
 
nav {
  margin: 50px;
}
 
ul {
  overflow: auto;
  list-style-type: none;
}
 
li {
  height: 25px;
  float: left;
  margin-right: 0px;
  border-right: 1px solid #aaa;
  padding: 0 20px;
}
 
li:last-child {
  border-right: none;
}
 
li a {
  text-decoration: none;
  color: #ccc;
  font: 25px/1 Helvetica, Verdana, sans-serif;
  text-transform: uppercase;
 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
 
li a:hover {
  color: #666;
}
 
li.active a {
  font-weight: bold;
  color: #333;
}

5. Список с большими цифрами, каждый новый элемент будет ознаменовываться порядковым числом
Список с большими цифрами
HTML код

<div>
  <ol>
    <li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
    <li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
    <li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
  </ol>
</div>

CSS стиль

div {
  width: 500px;
  margin: 10px
}
 
ol {
  color: #ccc;
  list-style-type: none;
}
 
ol li {
  position: relative;
  font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
  margin-bottom: 20px;
}
 
li p {
  font: 12px/1.5 Helvetica, sans-serif;
  padding-left: 60px;
  color: #555;
}
 
span {
  position: absolute;
}

Вы можете с лёгкостью экспериментировать и объединять несколько дизайнов списков в один.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *