Создаем меню с стиле Apple.com на чистом CSS3

Это меню было значительно темнее, чем предыдущее, серое, но выглядело так же здорово. Одна вещь, на которую я обратил внимание в меню, было то, что кнопки созданы из изображений. В тот момент я подумал, что можно бы сделать лучше, используя некоторые замечательные возможности CSS3. И вот сегодня я хочу представить вам меню сайта Apple.com которое создано с использованием только CSS3.

Так как меню в демо создано при помощи CSS3, убедитесь, что вы смотрите на его, используя CSS3-совместимый браузер. Webkit браузеры (Safari и Chrome) отображают эффекты лучше своих конкурентов, затем идет последняя версия Firefox. Opera и IE не отображают все правильно, но меню, тем не менее, работает.

А сейчас давайте посмотрим, что вам нужно сделать, что бы получить так же выглядящее меню.

CSS-правила

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

• font - устанавливает шрифт от Apple, который называется Lucida;
• text-shadow - применяется для создания теней текста, размещенного на кнопках;
• border-radius - необходим для создания округлых границ в первом и последнем пункте меню, а также в строке поиска;
• box-shadow - этот тип тени используется в нескольких местах, чтобы создать эффект падающей тени;
• box-shadow: inset - используя свойство inset, мы можем создать эффект внутренней тени;
• gradient - градиенты используются много где на демонстрационной странице. К сожалению, Webkit (Chrome и Safari) имеют другой синтаксис, чем Firefox. Подробнее о CSS градиенте читайте тут;
• :first-child - это псевдо селектор, используется для установки округлых углов для первого пункта меню;
• :not(:last-child) -:not селектор используется для того, чтобы не применять эффекты для последнего пункта, так как мы не нуждаемся в них (это строка поиска);
• background-image: url(), gradient() - несколько фонов применяются в поле поиска, чтобы показать иконку лупы и градиентный фон;
• keyframes - симпатичная анимация была применена с помощью keyframes, меню появляется и немного опускается вниз. Примите к сведению, это работает только в браузерах Webkit (Chrome и Safari) и Firefox;
• Fallback - Fallbacks довольно важно для браузеров, не поддерживающих эффекты полностью. Я использовал сплошной цвет фона, если градиент не поддерживается.

Как видите, многое из CSS3 было использовано здесь. Давайте теперь посмотрим как выглядит окончательный вариант нашего меню!

HTML-разметка

Здесь все просто:

<ul id="appleNav" class="list-unstyled">
  <li>
    <a href="#" title="Apple"><img src="i/logo.png" alt="Apple Logo" /></a>
  </li>
  <li>
    <a href="#" title="Store">Store</a>
  </li>
  <li>
    <a href="#" title="Mac">Mac</a>
  </li>
  <li>
    <a href="#" title="iPod">iPod</a>
  </li>
  <li>
    <a href="#" title="iPhone">iPhone</a>
  </li>
  <li>
    <a href="#" title="iPad">iPad</a>
  </li>
  <li>
    <a href="#" title="iTunes">iTunes</a>
  </li>
  <li>
    <a href="#" title="Support">Support</a>
  </li>
  <li>
    <form>
      <input type="text" />
    </form>
  </li>
</ul>

CSS-стили

Я добавил комментарии к некоторым частям, чтобы объяснить, что они делают и слегка усовершенствовал меню (перевел на flex-модель, упростил градиенты и сделал мелкие исправления).

/* APPLE STYLE NAVIGATION MENU */
#appleNav {
  /* Lucinda Grande - это шрифт который используется на сайте Apple. */
  font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  letter-spacing: -0.5px;
  font-size: .8125rem;

  /* Добавляем тонкую тень к тексту */
  text-shadow: 0 -1px 3px #202020;

  /* Мы хотим добавить тень к всему меню. Для того нам понадобится установить правильную ширину и высоту, а также границы, для того, чтобы создать идеальную тень */
  border-radius: 4px;
  box-shadow: 0 3px 4px #8b8b8b;

  margin: 2rem 0;
  display: flex;
}

#appleNav li {
  width: 105px;
  border-right: 1px solid #5d5d5d;
  border-left: 1px solid #929292;
  border-bottom: 1px solid #575757;
  border-top: 1px solid #797979;

  /* Градиентный фон для кнопок */
  background: rgb(120,120,120);
  background: linear-gradient(0deg, rgba(120,120,120,1) 0%, rgba(94,94,94,1) 50%, rgba(112,112,112,1) 51%, rgba(131,131,131,1) 100%);
}

/* Устанавливаем состояние при наведении мыши, за исключением последнего пункта в списке (строка поиска), так как она не нуждается в изменении */
#appleNav li:not(:last-child):hover {
  background: rgb(63,63,63);
  background: linear-gradient(0deg, rgba(63,63,63,1) 0%, rgba(56,56,56,1) 50%, rgba(67,67,67,1) 51%, rgba(85,85,85,1) 100%);

  /* Мы используем inset для box-shadow для создания тонкого внутреннего свечения при наведении */
  box-shadow: inset 0 0 5px 5px #535353;
}

/* Когда пользователь щелкает по кнопке, мы просто меняем box-shadow inset (в сравнении с "hover") */
#appleNav li:not(:last-child):active {
  background: rgb(63,63,63);
  background: linear-gradient(0deg, rgba(63,63,63,1) 0%, rgba(56,56,56,1) 50%, rgba(67,67,67,1) 51%, rgba(85,85,85,1) 100%);

  box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a {
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: block;
  line-height: 34px;
}

/* Округлые уголки для первого и последнего пункта. Мы также удаляем границы, так как они не нуждаются в них. */
#appleNav li:first-child {
  border-radius: 4px 0 0 4px;
  border-left: none;
}

/* Первое изображение - логотип - должен быть по центру. Из-за размера изображения, нам вручную необходимо перенести его немного.*/
#appleNav li:first-child a img {
  vertical-align: middle;
  margin-top: -4px;
}

#appleNav li:last-child {
  padding: 7px 10px;
  border-radius: 0 4px 4px 0;
  border-right: none;

  /* Ширина последнего пункта меню (панель поиска) он больше, чем остальные */
  /* width: 140px; */
  flex-grow: 1;
}

/* Стилизация поля поиска */
#appleNav form input {
  width: 100%;
  height: 20px;
  border: none;
  padding: 0 32px;
  color: #eee;
  border-radius: 10px;

  /* Мы используем несколько фонов для поля ввода: изображение лупы и градиентный фон */
  background: rgb(116,116,116);
  background: linear-gradient(0deg, rgba(116,116,116,1) 0%, rgba(110,110,110,1) 50%, rgba(126,126,126,1) 51%, rgba(141,141,141,1) 100%);

  background-image: url("i/magnifier.png");
  background-repeat: no-repeat;
  background-position: 10px 50%;

  box-shadow: inset 0 2px 1px 1px #363636;
}

/* Анимация */
@-webkit-keyframes showMenu {
  from { opacity: 0; top: -20px; }
  to   { opacity: 1; }
}
@-moz-keyframes showMenu {
  from { opacity: 0; top: -20px; }
  to   { opacity: 1; top: 0; }
}
#appleNav {
  position: relative;
  animation: showMenu 1s;
}

Заключение

Вот и все, что нужно для создания меню в стиле Apple.com! Что вы думаете об этом? Видите ли вы возможности для улучшения? Не стесняйтесь поделиться!