Стильне 3D меню на чистому CSS
Створюємо сучасне меню для сайту
Створення, розробка, виготовлення сайтів | WEB-STYDIA.COM

Доброго часу доби шановний відвідувач нашого сайту. Сьогодні я хочу поділитися з вами чудовим стильним 3D меню для вашого сайту, яке створено на чистому CSS без використання JS коду.

При розробці сайтів часто стоїть питання як створити меню для сайту, адже правильна, зручна і красива навігація є одним з найважливіших елементів будь-якого веб ресурсу.

Веб майстри часто не приділяють особливої ​​уваги при створенні меню, що є не зовсім вірно на мій погляд. Кожен сайт повинен бути унікальний і в ньому повинна бути своя родзинка, так чому б не проявити фантазію і не зробити щось незвичайне і привабливе.

І так, як уже говорилося вище, в сьогоднішній статті ми будемо створювати горизонтальне меню зі стильними 3D ефектами при наведенні, як все буде у вас виглядати ви можете подивитися в демо прикладі який ми додамо внизу сторінки.

Загалом приступимо до створення меню для сайту:

Насамперед нам потрібно створити HTML розмітку для нашого меню:

Як ви бачите в HTML розмітці меню нічого не звичайного немає, стандартний табличний li список, так що думаю в ньому розібратися не складно, ви без проблем можете додавати або змінювати нові підпункти.

Наступним буде йти css код для створюваного меню, в даному уроці це якраз найголовніше. В даному css коді ми додамо трансформацію за допомогою якої будуть випадати підпункти меню, додамо деякі стандартні базові стилі, і застосуємо функцію rotateX за допомогою якої ми визначимо кут обертання, а ще ми додамо градієнтну заливку за допомогою якої ми створимо плавні переходи і тіні.


І так нижче сам код css:

Ось власне і все що потрібно було щоб створити гарне меню для вашого сайту. Користуйтеся на здоров'я!

Подивитися живий приклад ви можете у нас на сайті:

Вас також може зацікавити

Немає коментарів

Ви можете залишити коментар першим.

Залишити коментар

Будь ласка, введіть Ваше ім'я. Будь ласка, введіть адресу електронної пошти. Будь ласка, введіть повідомлення.