Loading





Форекс с Альпари

eTXT




Анкетка


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

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

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

Демо-пример

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

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

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


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.


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка