В данной статье я хотел бы показать вам некоторые приёмы создания эффектов при помощи CSS3 на примере меню. Идея заключается в простой композиции элементов: иконки, основного названия и вторичного названия, которое будет анимировано при наведении курсора, используя только CSS-переходы и CSS-анимацию. Мы рассмотрим несколько различных эффектов для элементов.

Значки, используемые в демо, является шрифтом Web symbols. Шрифт создан студией Just Be Nice.

HTML-разметка

HTML-структура меню будет представлять собой неупорядоченный список, где каждый элемент является ссылкой, который в свою очередь включает в себя span с иконкой и div с основным и вторичным названием:

<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>

* This source code was highlighted with Source Code Highlighter.

Так как мы используем шрифт для иконок, мы будем писать соответствующую букву для иконки.

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; } 

Путь к файлам является относительным по отношению к файлу CSS, следовательно, они будут находиться в папке css/websymbols /.

Большое преимущество использования символьного шрифта в том, что мы можем применить различные красивые эффекты к нему, например, текст с тенью. Мы также можем растягивать его для наших нужд.

Стиль для маркированного списка будет почти одинаковым для каждого примера, мы просто будем адаптировать его ширину:

.ca-menu{ padding: 0; margin: 20px auto; width: 500px; } 

В следующем примере я покажу вам стили элементов, к которым будут применяться эффекты. В первом примере мы рассмотрим стили всех элементов, а в остальных мы сосредоточимся на отличиях.

Примечание: В следующих примерах я не буду писать префиксы для каждого браузера, потому что не хочу захламлять CSS, но Вы найдете все необходимые префиксы в демо-файлах. Read more …