Как добавить тени для меню или окно в CSS

Как добавить тени для меню или окно в CSS

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

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

Для начало создаем 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]–>

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

16 декабря 2008 в 18:236 комментариев Верстка,

Комментарии — 6 комментариев

  1. #177 Sect0R в 19:43, 16 декабря 2008:

    Ответить | Цитировать

    А не проще сделать это простым css ? Я где-то встречал описание как.

  2. #178 vanoID в 20:48, 16 декабря 2008:

    Ответить | Цитировать

    не исключаю

  3. #182 WebMast в 20:33, 18 декабря 2008:

    Ответить | Цитировать

    Есть несколько способов реализаации блоков с тенью. Это один из них.. Кстати, очень хороший!

  4. для IE 6 можно прописать специальные фильтры, нормально отображающие полупрозрачный png, и тоже заработает. На эту тему статья есть хорошая: http://yanajy.com/sdelay-sam/png-in-ie.html — там понятным языком всё написано как делать.

  5. #10674 Aslan в 5:43, 2 ноября 2010:

    Ответить | Цитировать

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

  6. Aslan, спасибо : ).

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

имя:

e-mail:

сайт:

текст:

Subscribe without commenting