Кто не любит красивые списки? Мы используем их постоянно в нашей разметке в самых различных ситуациях. Сегодня мы собираемся взглянуть на несколько простых и практичных примеров, которые вы можете использовать в своей работе.
Мы начнём с забавной анимации вертикального списка, продолжим списком с иконками и текстом, просто изображением и, наконец, создадим упорядоченный список, где номера оформлены необычным способом. Здесь много интересного, чтобы всё это увидеть, давайте начнём!
Список Helveti
Для нашего первого списка, мыначнём с простого, но привлекательного дизайна, который, правда, в значительной степени зависит от красоты шрифта. Мы будем использовать некоторые тонкие стилей Helvetica и используем плавную анимацию при наведении.
HTML
Наша разметка очень проста. Создаём DIV (вы, возможно, захотите использовать класс или идентификатор в реальном проекте), затем добавляем заголовок и неупорядоченный список из пяти пунктов.
<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 ширину и установим общие стили h2.
Далее, добавим списку стиль и сбросим все поля или отступы, которые могут присутствовать. Для элементов данного списка применена небольшая нижняя граница, которая выполняет функцию разделителя. Здесь использовн селектор last-child, но это на самом деле не страшно, даже если браузер не знает этот селектор, он просто добавит снизу дополнительную границу.
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;
}
Миниатюры
Одним из самых распространенных форматов, применяемый для списков, является “миниатюры и текст”. Он является отличным способом добавить некоторую визуальную привлекательность скучному списку пунктов.
Это чрезвычайно универсальный стиль, который вы можете использовать на любом количестве проектов. Давайте посмотрим, как это работает.
Demo:
HTML
Разметка в этом примере немного сложнее. Каждый элемент списка должен иметь три элемента: изображение, заголовок и текст. Изображения, которые здесь использованы, имеют размер 100px 100px, имейте это в виду, если вы хотите изменить стиль индивидуально. В целом, это все еще очень простая разметка, которая не должна вас смущать.
<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;
}
Сетка миниатюр
Раз уж мы говорим о неупорядоченных списках, мы должны рассмотреть, по крайней мере, одну сетку изображений, которые почти всегда обрабатывается списками. Мы не будем нагромождать ничего лишнего, оставим только самое необходимое, что бы иметь под рукой для быстрой вставки.
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
Здесь использован трюк “overflow:auto”, чтобы очистить “float“, добавлен темный фон и граница для изображений.
Для того, чтобы демо стало немного интересней, добавлен hover-эффект, который медленно применяет свечение. Это, конечно, совершенно необязательно.
* {
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);
}
Горизонтальное меню
Разработчики постоянно используют списки для горизонтального меню навигации. Новички постоянно ищут код этого трюка в поисковой системе Google, поэтому не забудьте добавить его в закладки или сохранить в свои любимые фрагменты кода.
Demo:
HTML
В примере с сеткой миниатюр, мы уже научились составлять элементы списка, так что бы они появлялись рядом друг с другом, так вот, мы будем использовать ту же технику, только с меньшим количеством элементов. Обратите внимание, что мы будем использовать класс “active”, чтобы сообщить пользователю на какой странице он в настоящее время находится. Это является довольно стандартной практикой
<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
Здесь мы распологаем наши элементы списка в левой части, оставляем границу только с правой стороны, оставляем стили по умолчанию для ссылок, а затем прописываем стили для состояний “hover" и “active".
* {
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;
}
Список с большими цифрами
Давайте не забывать, что не все списки являются неупорядоченными! Безусловно, существует много интересных стилей и для упорядоченных списков. Одним из самых интересных, является изменение размера цифр. Давайте посмотрим, как это работает.
Demo:
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;
}