Ще зовсім недавно 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 код!