Рубрика CSS

Стильный список с помощью одного пикселя

Однопиксельное фоновое изображение может быть достаточно универсальным в применении. С помощью repeat-x оно может стать горизонтальной линией, с помощью repeat-y – вертикальной, repeat – полностью заполнить страницу одним цветом. Кроме того, его можно использовать для стилизации неупорядоченных списков.

Обычный HTML код, только вложенный неупорядоченный список.

<ul id="project-list">
<li><a href="#">Civil Engineering</a>
<ul>
<li><a href="#">Cowley Hall Parking Lot Recontruction</a></li>
<li><a href="#">Culver’s Home Office</a></li>
<li><a href="#">First Addition to Highland Addition</a></li>
<li><a href="#">Fox Point Apartments</a>
<ul>
<li><a href="#">East Side</a></li>
<li><a href="#">West Side</a></li>
</ul>
</li>
<li><a href="#">Metropolitan Place Phase II</a></li>
<li><a href="#">Oak Park Place of Baraboo</a></li>
<li><a href="#">Premier Coop</a></li>
<li><a href="#">Sleep Inn & Suites</a></li>
<li><a href="#">Tradewinds Business Center</a></li>
<li><a href="#">UW-Madison Nielsen Tennis Stadium</a></li>
</ul>
</li>
<li><a href="#">Environmental Engineering</a></li>
<li><a href="#">Telecommunications Engineering</a>
<ul>
<li><a href="#">Nsight TeleServices (CellCom) Wisconsin</a></li>
<li><a href="#">Oakland County/Radian Communications Michigan</a></li>
<li><a href="#">T-Mobile Site Deployment</a></li>
<li><a href="#">U.S. Cellular Network Development</a></li>
<li><a href="#">Western Wireless South Dakota</a></li>
</ul>
</li>
</ul>

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

#project-list {
background:transparent url(../images/graypixel.png) repeat-y 15px 0;
width:340px;
}

#project-list li {
font-size:16px;
margin:15px 0 20px;
padding:0 0 0 10px;
}

#project-list li a {
background:white;
color:#1F6DD9;
display:block;
padding:3px;
}

#project-list li a:hover {
color:#84B8FF;
}

#project-list li ul li {
background:transparent url(../images/graypixel.png) repeat-x 0 8px;
font-size:13px;
margin:4px 0 4px 5px;
padding:0 0 0 20px;
}

#project-list li ul li a {
padding:0 0 0 3px;
}

#project-list li ul li ul {
background:transparent url(../images/graypixel.png) repeat-y 15px 0;
margin-bottom:10px;
}

#project-list li ul li ul li {
margin-left:16px;
padding-left:10px;
}

Источник: www.css-tricks.com.
Перевод: Администратор сайта explorer-soft.com.