Loading





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

eTXT




Анкетка


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

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

Это меню на CSS использует способность CSS3, чтобы создать тени (тень растет внутрь) в пункте меню при наведении курсора мыши. С помощью CSS3 анимации происходит постепенный переход с эффектом между пунктами меню. Изображения используются косвенно, то есть, они не принимают непосредственного участия в формировании собственно конструкции меню, а являются необязательным дополнением дизайна. Эффект тени работает во всех современных браузерах, чего нельзя сказать об старых браузерах, в которых пользователи просто не увидят CSS3 анимацию и тени, но меню при этом остается полностью функциональным.

Демо-пример

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

1. Код в таблице внизу вставить в раздел head или файл стилей сайта:

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


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


<div class="shadowblockmenu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Дизайн</a></li>
<li><a href="#">Оптимизация</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>

Для добавления теней применяется свойство box-shadow и в нашем случае для создания первоначальной тени предназначен участок кода CSS:


box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);

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


box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);

Если имеет место добавления двух слоёв тени к элементу, то для создания множественных теней, просто отделите каждое определение тени запятой внутри определенного свойства.

Дополнительные изображения вставлены в первые два пункта меню. Если появится желание добавить изображения в следующие пункты, копируйте и вставляйте в коде CSS этот участок, не забывая о нумерации (3, 4, 5 и т.д.):

 

.shadowblockmenu li:nth-of-type(3) a{ /* Extra style for 2nd menu link */
padding-left: 25px;
background: url(img/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}



Используемые изображения:
изображение
изображение

Сохраните эти изображения в папку img, которая должна находиться в одной директории с файлом, в котором расположено меню.

Думаю, что всё понятно. Пока! L.M.


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




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







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