479 Еще совсем недавно 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
В некоторых частях кода были добавлены комментарии, чтобы объяснить как это все работает.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
/* навигационное меню */ #appleNav { margin:40px 0; list-style:none; /* Lucinda Grande */ 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 */ } /* Прописываем стили для состояния hover для всех элементов меню кроме поисковой строки */ #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 для внутренней тени */ -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; /* 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; /* Используем CSS3 мульти-бэкграунды для поискового поля */ 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; } /* Закругляем первый и последние элементы. Кратко: Top left, Top right, Bottom right, Bottom left. Также удаляем бордюры. */ #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) */ @-webkit-keyframes showMenu { from { opacity: 0; top:-20px; } to { opacity: 1; } } #appleNav { -webkit-animation: showMenu 1s; position:relative; } |
Вот и все, что нужно для создания навигационного меню с помощью CSS3. Что вы думаете об этом?
P.S.: Недавно столкнулся с проблемой, нужно было срочно сделать ремонт, а времени мало... Пришлось заказать ремонт квартир под ключ. Проделанной работой остался доволен: и время сэкономил, и качество хорошее.
