Совсем недавно на сайте 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;
Вот и всё. Надеюсь, урок вам понравился!