Навигация как на Apple.com средствами CSS3

Совсем недавно на сайте Apple.com было представлено новое навигационное меню на начальной странице. На этот раз, она была намного темнее предыдущей, что придало панели навигации классный эффект. Тут я бы хотел отметить, что каждая кнопка навигации представляет собой изображение. Как раз этот момент мы и можем под редактировать средствами CSS3.

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

Помимо меню, на сайте Apple.com также была обновлена панель поиска, которую мы не будем рассматривать в этом демонстрационном примере. Это мы сделаем в одном из последующих уроков. Пока давайте полностью сконцентрируемся на CSS3.

Метод

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

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

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

CSS

#appleNav {
    margin:40px 0; list-style:none;
 
    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; /* Если не поддерживается CSS3 */
}
 
#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; /* Если не поддерживается CSS3 */
    
    -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;
}
 
#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; /* Если не поддерживается CSS3 */
    
    -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; /* Если не поддерживается CSS3 */
    
    -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; }
}
 
#appleNav {
     -webkit-animation: showMenu 1s; position:relative;


Вот и всё. Надеюсь, урок вам понравился!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/ekoReowCQQc/lessons.php

Читать комменты и комментировать

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



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

Навигация как на Apple.com средствами CSS3 | | 2012-06-19 12:06:54 | | Статьи Web-мастеру | | Совсем недавно на сайте Apple.com было представлено новое навигационное меню на начальной странице. На этот раз, она была намного темнее предыдущей, что придало панели навигации классный эффект. Тут | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: