Оформляйте списки используя только CSS


В наши дни необычайно широко используются списки HTML (<ol>для упорядоченного списка, <ul>для неупорядоченного списка). Однако эти простые списки можно стилизовать, что бы улучшить восприятие или вписать их в дизайн. Ниже приведены 8 простых стилейдля списков HTML, использующих только CSS. Применение CSS техникпозволит создать вместо скучного списка потрясающий элемент дизайна, а иногда и добавить ему некоторой функциональности.

По умолчанию упорядоченные (ordered list) и неупорядоченные списки (unordered list) выглядят довольно просто:

  1. Элемент упорядоченного списка #1
  2. Элемент упорядоченного списка #2
  3. Элемент упорядоченного списка #3
  • Элемент неупорядоченного списка #1
  • Элемент неупорядоченного списка #2
  • Элемент неупорядоченного списка #3

Для некоторых этого будет достаточно, но мы пойдём дальше.

Список #1 : Простая навигация

Наиболее распространённое использование списка для навигации на вэб сайте. В этом примере, использование CSS позволяет создать простую, минимальную но приятную структуру.

html:

<div id="list1">
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div>

css:

/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }

Список #2 : Другой шрифт для нумерации

Проблемма со списками состоит в том, что цифры нумерации не могут выглядеть по другому нежели выглядит сам текст списков. Числа в списке всегда имеют тотже цвет и шрифт, что и текст.

Но добавив дополнительный элемент в пункты списка, можно обойти это ограничение и создать очень интересны список.

html:

<div id="list2">
		<ol>
			<li><p><em>Соединённые Штаты Америки</em> государство в Северной Америке. Занимает четвёртое место в мире по территории.</p></li>
			<li><p><em>Англия</em> наиболее крупная историческая и административная часть Соединённого Королевства Великобритании и Северной Ирландии.</p></li>
			<li><p><em>Испания</em> государство на юго-западе Европы. Занимает большую часть Пиренейского полуострова.</p></li>
		</ol>
	</div>

css:

/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }

Список #3 : Картинки в маркированном списке

Маркированный список можно изменять и применять другие встроенные значения, а также использовать в качестве маркеров картинки. Эта техника позволяет сделать список более стильным. Вот как это делается:

html:

<div id="list3">
		<ul>
			<li>Java</li>
			<li>.NET</li>
			<li>C++</li>
			<li>PHP</li>
		</ul>
	</div>

css:

/* LIST #3 */
#list3 { }
#list3 ul { list-style-image: url("../images/arrow.png"); color:#eee; font-size:18px; }
#list3 ul li { line-height:30px; }

Список #4 : Список в стиле iPhone

Этот стиль позволяет отображать список похожим на список в iPhone. Список очень оживляет дизайн на сайте.

html:

<div id="list4">
		<ul>
			<li><a href="http://en.wikipedia.org/wiki/2004_Summer_Olympics"><strong>Торонто</strong>2004</a></li>
			<li><a href="http://en.wikipedia.org/wiki/2008_Summer_Olympics"><strong>Бейджинг</strong>2008</a></li>
			<li><a href="http://en.wikipedia.org/wiki/2012_Summer_Olympics"><strong>Лондон</strong>2012</a></li>
			<li><a href="http://en.wikipedia.org/wiki/2016_Summer_Olympics"><strong>Рио Де Жанейро</strong>2016</a></li>
		</ul>
	</div>

css:

/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
	border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; background-image:url(../images/hover.png); background-repeat:repeat-x; }
#list4 ul li a strong { margin-right:10px; }

Список #5 : Вложенные списки

Вложенные списки (списки внутри списков) могут быть очень полезны и очень красиво оформлены. Комбинируя третью технику (Картинки в маркированном списке), можно создать расширенный список. Конечно, при помощи jQuery такой список можно заставить работать, но мы ограничимся только техникой CSS.

html:

<div id="list5">
		<ol>
			<li>Google
				<ol>
					<li>Picasa</li>
					<li>Feedburner</li>
					<li>Youtube</li>
				</ol>
			</li>
			<li>Microsoft
				<ol>
					<li>Corel Corporation</li>
					<li>Zignals</li>
					<li>ByteTaxi</li>
				</ol>
			</li>
			<li>Yahoo!
				<ol>
					<li>Xoopit</li>
					<li>BuzzTracker</li>
					<li>MyBlogLog</li>
				</ol>
			</li>
		</ol>
	</div>

css:

/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

Список #6 : Римская нумерация внутри списка

По умолчанию, упорядоченный список использует числа (1, 2, 3, 4 и т.д.) в качестве стиля списка. Изменяя значение стиля в CSS, можно создать другую систему нумерования, например в римском стиле.

Также по умолчанию, список выносит маркеры за пределы основного текста (например как во втором списке). С помощью CSS можно также изменить позицию маркеров и заставить список отображать нумерацию внутри списка.

html:

<div id="list6">
		<ol>
			<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Fusce sit amet eros ut leo consectetur fermentum eget a dui.</li>
			<li>Aenean placerat lectus tristique est tempus feugiat.<br />Vivamus interdum dapibus suscipit.<br />Donec eu adipiscing ligula.</li>
			<li>Mauris eget sapien arcu, vitae feugiat risus.<br />Phasellus neque risus, egestas tincidunt blandit vel, suscipit vitae sem.</li>
			<li>Phasellus feugiat lacus at dolor auctor volutpat.<br />Duis rhoncus sollicitudin imperdiet.</li>
		</ol>
	</div>

css:

/* LIST #6 */
#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }
#list6 ol li { }

Список #7 : Список в строку через запятые

Обычно списки оспользуются для отображения значений списка вертикально друг под другом. Но используя CSS, список достаточно легко отобразить в одну строку. Но отображая в одну строку, значения списка лучше разделить, например, запятыми. Как это сделать? При помощи псевдо кода:

html:

<div id="list7">
		<ul>
			<li>Первый элемент строки</li>
			<li>Второй элемент строки</li>
			<li>Третий элемент строки</li>
			<li class="last">Четвёртый элемент строки</li>
		</ul>
	</div>

css:

/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }

Список #8 : Навигация с вращением

Эта небольшая техника использует CSS3 (поддерживается последними версиями Firefox, Safari и Chrome). При наведении курсора мыши на элемент списка, элемент поворачивается и отбрасывает тень. Может быть не очень полезно, но зато красиво выглядит.

html:

<div id="list8">
		<ul>
			<li><a href="#">Главная</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">О сайте</a></li>
			<li><a href="#">Контакты</a></li>
		</ul>
	</div>

css:

/* LIST #8 */
#list8 { }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
	text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
	-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
	transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Применяя CSS, можно создавать необычные вещи с обычными списками.

По материалам marcofolio
[Исходник]

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

3 комментария

  1. PavelHZ08/04/2013
  2. BlacKKaT13/03/2011
  3. glazsasha22/12/2010

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

1 × 3 =