Создаем навигацию в виде полки приложений | RUDEBOXВ данном уроке мы рассмотрим процесс создания весьма интересной, но в тоже время простой полки приложений, на первый взгляд в ней нет ничего особенного, но это не так, мы добавили небольшую анимацию к иконкам при наведении курсора мыши. При этом иконка будет плавно сдвигаться в низ, а подписи плавно появляться с под иконки, при этом иконка немного выделяется тенью. Такой вариант навигации станет отличным дополнением для сайта, в котором решили отойти от обычной реализации организации материалов.

Для создания данной полки нам понадобятся заготовленные заранее изображение, в исходниках вы сможете найти макет, который Вы сможете подправить на свое усмотрение. И так, давайте приступим.

Шаг 1. HTML

Для организации разметки нам понадобится таблица, которую мы заключим в стили, кроме этого мы добавим иконки, и подписи к ним:

С разметкой все достаточно просто, не будем на ней останавливаться и перейдем к следующему шагу.

Создаем навигацию в виде полки приложений | RUDEBOX

Шаг 2. CSS

Сначала мы установим общие параметры для контейнера, затем мы установим тени для иконок, и параметры ориентации для иконок, про иконки мы тоже не забыли, мы выводим их в самом конце стилей:

Некоторые стили были упущены, так как они используются исключительно для демонстрации.

Вот и все. Готово!

Данный урок был разработан моим приятелем и веб-дизайнером Глебом Кавраским.

Читайте также: