Вертикальное меню с тенью внутри при наведении курсора мыши

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Это стильное меню использует возможности CSS3, чтобы создать красивые тени (тень растет внутрь) в элементе, на который наведен курсор мыши.

Демо-пример

Установка на сайт:

1. Скопировать и вставить код со стилями в файл стилей сайта или в раздел head своего сайта:

Для выделения текста сделайте щелчок мышью.
Для увеличения окна, «подцепите» мышью правый нижний угол.



<style type="text/css">
.shadowblockmenu-v{
font: bold 14px Germand;
width: 180px; /* width of menu */
}

.shadowblockmenu-v ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}

.shadowblockmenu-v ul li{
margin: 0;
padding: 0;
}

.shadowblockmenu-v ul li a{
display: block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #cacaca; /*right border between menu items*/
 -moz-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6); /*Add inset shadow to each menu item. First 3 values in (114,114,114, 0.5) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
box-shadow: inset 7px 0 10px rgba(114,114,114, 0.6);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.shadowblockmenu-v ul li a:hover, .shadowblockmenu-v ul li a.selected{
color: black;
-moz-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);  /* Add 3 inset shadows to each menu item  */
-webkit-box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.5), inset 0 0 15px rgba(216,89,39, 0.6), inset 0 0 20px rgba(216,89,39, 0.8);
}
</style>

2. А этот участок кода скопируйте и вставьте в раздел body своего сайта, где желаете видеть меню:


<div class="shadowblockmenu-v">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Компьютер</a></li>
<li><a href="#">Интернет</a></li>
<li><a href="#">Оптимизация</a></li>
<li><a href="#">Проекты</a></li>
</ul>
</div>

Пропишите свои URL-лы и названия ссылок. Некоторые настройки, например, ширина меню (width), отступы (margin и padding), цвет (color и background-color), размер шрифта (font-weight), выравнивание текста (text-align) и другие, доступны в CSS.

За создание эффекта теней отвечает участок кода в CSS:

 
box-shadow: inset 7px 0 10px rgba(216,89,39, 0.4), inset 0 0 15px rgba(216,89,39, 0.6);

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

Желаю всех благ! Ваш L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки