Apple.com навигационное меню на CSS3

Еще совсем недавно Apple.com обновил на своем сайте навигационное меню наверху страницы. Это меню получилось темнее, чем предшественник, в его сером обличии, но выглядеть стало на много лучше.

Одна вещь, которая сразу же бросилась в глаза, это то, что меню было сверстано на изображениях. Мы же попробуем воссоздать это меню, но с помощью техники CSS3.

И так, представляем вам навигационное меню, как на сайте Apple.com, полностью выполненное с помощью CSS3.

Напоминаем, так как меню сверстано на CSS3, то и браузер, с помощью которого вы будете его просматривать, должен быть webkit совместимым. Поэтому в Opera и IE меню может выглядеть не так красиво, как на картинке, но при этом останется работоспособным.

Техника

Прежде чем мы приступим к CSS программированию, сначала покажем несколько методов, которые будут использоваться для создания желаемого эффекта:

  • font — используется тот же самый шрифт, что и на Apple.com Lucida.
  • text-shadow — сглаженная тень на тексте, используется в названиях кнопок.
  • border-radius — Закругленный бордюр используется на первом и последнем элементе меню, а также в поисковой строке.
  • box-shadow — используется в нескольких местах, чтобы создать тонкий эффект тени.
  • box-shadow: inset — нужен для создания внутреннего эффекта тени.
  • gradient — градиенты используются на большинстве элементов меню, поэтому в их создании очень поможет CSS3 генератор градиентов.
  • :first-child — этот псевдо-элемент используется для выборки первого элемента в меню.
  • :not (:last-child) — селектор :not(:last-child) исключает последнего потомка для события hover.
  • background-image: url (), gradient () — мульти-бэкграунды используются в строке поиска, для отображения фонового градиента и лупы.
  • keyframes — сделана изящная анимация исчезания меню с помощью кейфреймов.
  • Fallback — обратная поддержка очень важна для браузеров, не поддерживающих градиенты, поэтому ставим заглушки в виде выставления свойства background-color.

Теперь давайте посмотрим, как выглядит CSS код!

CSS

В некоторых частях кода были добавлены комментарии, чтобы объяснить как это все работает.

Вот и все, что нужно для создания навигационного меню с помощью CSS3. Что вы думаете об этом?

P.S.: Недавно столкнулся с проблемой, нужно было срочно сделать ремонт, а времени мало... Пришлось заказать ремонт квартир под ключ. Проделанной работой остался доволен: и время сэкономил, и качество хорошее.


Оставить комментарий