Webmasters.BY

Главная Статьи Верстка сайтов Создаем меню сайта Apple.com используя только CSS3
Создаем меню сайта Apple.com используя только CSS3
Рейтинг пользователей: / 1
ХудшийЛучший 
24.11.2011 00:00

apple menu CSS3

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

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

Демо CSS3 меню Apple.com

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

CSS-правила

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

font - устанавливает шрифт от Apple, который называется Lucida.
text-shadow - применяется для создания теней текста, размещенного на кнопках.
border-radius - 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 было использовано здесь. Давайте теперь посмотрим как выглядит окончательный вариант CSS!

CSS

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

/* APPLE STYLE NAVIGATION MENU */
#appleNav {
 margin:40px 0; list-style:none;
 
 /* Lucinda Grande - это шрифт который используется на сайте Apple. */
 font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;
 
 /* Добавляем тонкую тень к тексту */
 text-shadow: 0 -1px 3px #202020;
 
 /* Мы хотим добавить тень к всему меню. Для того нам понадобится установить правильную ширину и высоту, а также границы, для того, чтобы создать идеальную тень */
 width:980px; height:34px;
 
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 border-radius:4px;
 
 -moz-box-shadow: 0px 3px 3px #cecece;
 -webkit-box-shadow: 0px 3px 3px #cecece;
 box-shadow: 0 3px 4px #8b8b8b;
}
 
#appleNav li {
 display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;
 
 /* Градиентный фон для кнопок */
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
 background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
 background-color:#5f5f5f; /* Fallback */
}
 
/* Устанавливаем состояние при наведении мыши, за исключением последнего пункта в списке (строка поиска), так как она не нуждается в изменении */
#appleNav li:not(:last-child):hover {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
 background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
 background-color:#383838; /* Fallback */
 
 /* Мы используем inset для box-shadow для создания тонкого внутреннего свечения при наведении*/
 -moz-box-shadow: inset 0 0 5px 5px #535353;
 -webkit-box-shadow: inset 0 0 5px 5px #535353;
 box-shadow: inset 0 0 5px 5px #535353;
}
 
/* Когда пользователь щелкает по кнопке, мы просто меняем box-shadow inset (в сравнении с "hover") */
#appleNav li:not(:last-child):active {
 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
 background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
 background-color:#383838; /* Fallback */
 
 -moz-box-shadow: inset 0 1px 2px 2px #000;
 -webkit-box-shadow: inset 0 1px 2px 2px #000;
 box-shadow: inset 0 1px 2px 2px #000;
}
 
#appleNav li a {
 color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }
 
/* Стилизация поля поиска */
#appleNav form input {
 width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;
 
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
 
 /* Мы используем несколько фонов для поля ввода: изображение лупы и градиентный фон */   
 background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
 background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
 background-repeat: no-repeat;
 
 background-color:#6E6E6E; /* Fallback */
 
 -moz-box-shadow: inset 0 2px 1px 1px #363636;
 -webkit-box-shadow: inset 0 2px 1px 1px #363636;
 box-shadow: inset 0 2px 1px 1px #363636;
}
 
/* Округлые уголки для первого и последнего пункта. Мы также удаляем границы, так как они не нуждаются в них. */
#appleNav li:first-child {
 -moz-border-radius:4px 0 0 4px;
 -webkit-border-radius:4px 0 0 4px;
 border-radius:4px 0 0 4px;
 
 border-left:none;
}
 
/* Первое изображение - логотип - должен быть по центру. Из-за размера изображения, нам вручную необходимо перенести его немного.*/
#appleNav li:first-child a img {
 vertical-align:middle; margin-top:-2px;
}
 
#appleNav li:last-child {
 -moz-border-radius:0 4px 4px 0;
 -webkit-border-radius:0 4px 4px 0;
 border-radius:0 4px 4px 0;
 
 border-right:none;
 
 /* Ширина последнего пункта меню (панель поиска) он больше, чем остальные */
 width:124px;
}
 
/* Анимация */
@-webkit-keyframes showMenu {
 from { opacity: 0; top:-20px; }
 to   { opacity: 1; }
}
@-moz-keyframes showMenu {
 from { opacity: 0; top:-20px; }
 to   { opacity: 1; top:0px; }
}
 
#appleNav {
 -webkit-animation: showMenu 1s; position:relative;
-moz-animation: showMenu 2s;
}

Заключение

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

Демо CSS3 меню Apple.com

Перевод

Добавить комментарий


Защитный код
Обновить

Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Обновлено 24.11.2011 17:00
 

Апельсин-1

Голосование

Ваш любимый html-редактор?

Новые файлы

Шпаргалка по HTML5 Canvas

Archive - бесплатный кириллический шрифт

Шпаргалка по HTML5 атрибутам обработчиков событий

См. также

activecloud.ru

TisRef

Баннер

Видеоуроки

Система Orphus

Кто онлайн

Сейчас 39 гостей онлайн

Комментарии

Статистика
Webmasters.BY © 2008 - 2012