Навигация как на 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.