Вертикальное многоцветное 3D меню на CSS3

В нашем новом уроке мы создадим элегантное вертикальное, многоцветное, кроссбраузерное CSS3 меню с трёхмерной анимацией (с помощью свойств CSS3: transition, perspective и transform) и переключатель цветов. Наше меню будет основано на тегах UL-LI.

Вы можете просмотреть пример и скачать файлы исходников:

Пример Скачать

Ok, после загрузки файлов приступаем к обзору кода.

Шаг 1. HTML

Как всегда, мы начинаем с HTML. Ниже приведён html код нашего меню. Это навигационное меню, как обычно основанное на тегах UL-LI. Конечно же самым интересным будут стили CSS.

index.html

Шаг 2. CSS

Вот CSS стили нашего вертикального меню. Вы, возможно, обратили внимание, что в html мы используем два файла CSS: layout.css и menu.css. Первый (layout.css) содержит стили демо-страницы. Мы не выкладываем эти стили в статье, но если они вам нужны, вы можете найти их, скачав пакет исходников.

css/menu.css

Пример Скачать

Заключение

Надеюсь, вам понравилось новое 3D меню. Не забудьте сказать спасибо и оставить комментарий. Удачи!


Оставить комментарий