Меню Apple с использованием CSS3 | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSМеню Apple с использованием CSS3
Дата: 09.07.2013 в 23:56 | Просмотров: 3735

Меню Apple с использованием CSS3

меню apple, меню навигации
Скачатьбесплатно с сервера
Демодемонстрация

Некоторое время назад, на сайте Apple.com появилось новое меню навигации, но кнопки были созданы из изображений.

Я думаю, что лучше было бы сделать это меню apple с помощью css3 техники. Так что сегодня я представляю Вам оригинальное навигационное меню apple, созданное только с использованием CSS3. Также обязательно смотрите анимационное меню в стиле apple IMAC, читайте об этом здесь.

Внимание: так как меню создано на CSS3, убедитесь, что используете современный браузер последней версии, поддерживающий свойства CSS3.

HTML структура

Разметка стандартная, обычный список ul:

Теперь давайте рассмотрим все CSS3 стили, которые необходимы для создания этого красивого навигационного меню.

Теория – необходимые свойства

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

  • font – шрифт как у Apple, называется Lucida (+ задан альтернативный шрифт, на случай если первый не установлен);
  • text-shadow – гладкая тень, примененная для текста кнопок;
  • border-radius – необходим для создания скругленных углов для первого и последнего пункта меню, а также в строке поиска;
  • box-shadow – этот тип тени используется в нескольких местах, чтобы создать тонкий эффект тени;
  • box-shadow: inset – эффект внутренней тени;
  • gradient – серый фон градиент;
  • :first-child – псевдо селектор, используется для того, чтобы задать закругленные углы только первому пункту меню;
  • :not(:last-child) – фильтрует последний элемент, чтобы поле поиска было без эффекта при наведении;
  • background-image: url(), gradient() – несколько фонов применяются в поле поиска, чтобы показать иконку лупы и градиент фона;
  • keyframes – эффект анимации показа меню при загрузке. Работает только в современных браузерах;
  • Fallback – альтернативные варианты для браузеров, которые не поддерживают эффекты css3 полностью.

Как Вы можете видеть, используется много CSS3 свойств. Меню имеет высокий уровень детализации, поэтому и выглядит симпатично. Давайте посмотрим на конечный CSS код!

CSS

Все стили для нашего меню:

Заключение

Вот и все, что необходимо для созданию красивого и современного меню в стиле apple. Что скажете? Надеюсь Вам понравилось! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://www.marcofolio.net
Перевел: Владислав Бондаренко


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