Навигация как на 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
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 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 » Интеграция с Яндекс Еда
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp