Какими разнообразными блоками навигации пестрят нынешние сайты большой и необъятной сети. С недавнишних временя, стало модной тенденцией делать блоки с закругленными краями а-ля Хабра. Ну а я же, хочу рассказать тебе, как сделать блок с тенью.

Графическая часть

Для начало создаем 3 элемента окна, с затемнением на краях? для это поставим такие вот настройки:

Сделав блок с затемнением, вырезаем нужные нам элементы (верхнюю и нижнюю часть, а так же центральную часть в размере 1 пиксель), вот таким вот образом:

В результате, мы получим что-то подобное на мое:

Программная часть

В качестве наглядного примера, я использую обычное вертикальное меню, в файле, мы объявляем его,

Ттаким вот способом:

<div id="menu">
<ul id="menu_list">
<li>Байт</li>
<li>Килобайт</li>
<li>Мегабайт</li>
<li>Гигабайт</li>
<li>Терабайт</li>
</ul>
<div id="menu_bottom"></div>
</div>

CSS

Описываем CSS стиль для нашего блока навигации:

#menu {
padding-top: 26px;
background: url(shadow_top.png) no-repeat;
width: 164px;
}
#menu_list {
padding: 0 0 6px 0;
margin: 0;
list-style: none;
background: url(shadow_middle.png) repeat-y;
}
#menu_list li {
padding: 2px 35px;
}
#menu_bottom {
height: 26px;
background: url(shadow_bottom.png) no-repeat;
}

Тут так же все предельно ясно, если посмотреть где и что какой div выводит. Проделав все, мы получим данный чудо-блок:

Кроссбраузерность

Данная реализация не работает в IE6, однако для 7 версии, можно прописать:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menu {
background: url(shadow_top.gif) no-repeat;
}
#menu_list {
background: url(shadow_middle.gif) repeat-y;
}
#menu_bottom {
background: url(shadow_bottom.gif) no-repeat;
}
</style>
<![endif]->

Тут смотрим что получилось, а тут качаем все исходные данные. Благодарю за внимание, жду комментирования, по улучшению!