| Главная » Файлы » Прочие скрипты » CSS |
Анимированное меню на CSS3 для uCoz
| 24.06.14, 09:07:06 | |
 В этой статье я хочу рассказать как сделать разнообразые анимированные эффекты для меню. Все будет производиться на чистом CSS3. Может быть кому-нибудь и пригодится данное творение. Для иконок мы будем использовать специальный шрифт, подключаемый через font-face. Демо HTML HTML довольно прост - стандартное меню-список. Так как мы используем шрифт для иконок, мы будем писать соответствующую букву для нужной иконки. Код <ul class="ca-menu"> <li> <a href="#"> <span class="ca-icon">A</span> <div class="ca-content"> <h2 class="ca-main">Статьи</h2> <h3 class="ca-sub">Статьи о вебразработке</h3> </div> </a> </li> </ul> CSS Для начала мы подключаем шрифт для символов: Код @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.woff') format('woff'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } Большое преимущество использования символьного шрифта в том, что мы можем применить различные эффекты к нему - например, тень. Стиль для меню-списка будет почти одинаковым для каждого примера, мы просто будем изменять его ширину: Код .ca-menu{ padding: 0; margin: 20px auto; width: 500px; } Примечание: В спойлерах ниже я не буду писать никакой код, только скриншоты. Весь необходимый код есть в прикрепленном архиве. Все! Надеюсь кто-нибудь найдет для себя что-то новое и полезное. Внимание - все будет работать почти так как надо только в самых новых версиях браузеров Google Chrome, Safari и Mozilla Firefox. В Opera некоторые примеры почти не работают - скорее всего она не поддерживает keyframes. Ну а про осла и говорить не нужно. | |
| Просмотров: 504 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |