Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
1-03-2011, 21:59. Разместил: Admin
Стильная универсальная CSS3 навигация для сайтаЭто универсальное меню - замечательный пример CSS3 анимации. Раньше такого эффекта можно было добиться только с помощью скриптов, теперь это элементарно реализуется благодаря новым CSS3 свойствам.
В эту навигацию вошли такие CSS3 свойства как:
box-shadow - тень
border-radius - скругление углов
transition - CSS3 анимация (основа реализации навигации)
opacity - прозрачность
rgba - цвет + прозрачность одним свойством
Реализация этой навигации, на первый взгляд, может показаться сложной, но, на самом деле всё очень просто. Меню реализовано маркированным списком, в элемент списка вложен контейнер(DIV) с ещё одним маркированным списком, вот и вся HTML реализация, а вот CSS реализация немного сложнее, тут в двух словах не обьяснить, так что качайте пример, разбирайте, изучайте, подругому никак.
Код меню валидный DTD XHTML 1.0 Strict меню корректно работает только в новейших браузерах - Opera 11, последние Google Chrome или Safari, этими браузерами и нужно просматривать пример. Для прикола можно посмотреть пример меню браузером IE
Смотреть пример универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
Скачать готовый пример универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
Пользуемся на здоровье!
Не забываем комментировать и добавлять новость в закладки!
Вернуться назад