Оформляйте списки используя только 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

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

17 − 10 =