С выходом CSS3 скрипта, стали широко популярны эффекты с его применением, отлично смотрится, достаточно легок в применении, ведь все хотят создать стильный сайт. В данном уроке речь пойдет о создании замечательного меню только на CSS3, Данное меню прекрасно отображается в Firefox, Safari и Chrome. Также меню работает и в других браузерах, но без скругленных углов. В меню будет используется простой неупорядоченный список с несколькими уровнями вложенности. Все предельно просто, давайте посмотрим на результат..

Данное меню будет содержать вкладки, и при создании его были использованы следующие свойства CSS3 - border-radius, box-shadow, и text-shadow.

Интенсивность градиента можно изменить смещением фона вниз или вверх. Также, цвет градиента можно легко подстроить меняя фоновый цвет.

1.CSS.  Все основные функции можно просмотреть на следующей картинке:

2. Структура меню html, можно легко добавить новые пункты на свое усмотрение:

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

На главную

Читайте также: