В сегодняшнем небольшом уроке мы создадим меню в стиле MAC с помощью новых свойств CSS3.
Это меню будет мультиуровневым и при создании его были использованы следующие свойства CSS3 - border-radius, box-shadow, и text-shadow.
Данное меню прекрасно отображается в Firefox, Safari и Chrome. Также меню работает и в других браузерах, но без скругленных углов.
Ниже представлена картинка, которая показывают разницу между браузерами:
Одна картинка
Одна бело-прозрачная картинка используется для достижения эффекта градиента. Поскольку новое CSS3 свойство градиента не поддерживается всеми браузерами, безопаснее использовать фоновое изображение.
Интенсивность градиента можно изменить смещением фона вниз или вверх. Также, цвет градиента можно легко подстроить меняя фоновый цвет.
CSS код
Автор урока предпочел построчно не расписывать каждую строку кода. Все понятно по одной картинке: