Webmasters.BY

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

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

HTML-разметка

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

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

CSS

В  общих стилях для всех примеров будет включение символьного шрифта:

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

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

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

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

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

Пример 1

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

Давайте определим стиль элемента списка:

Переход будет для всех свойств, так как мы хотим изменить цвет границы и цвет фона.

Ссылка элемента будет иметь следующий стиль:

Давайте определим стили для отдельных элементов. Span иконки будет иметь следующий стиль:

Как вы можете видеть, мы будем использовать веб-символы, как семейство шрифтов. Каждая буква будет иконкой.

Враппер для элементов контента будет иметь следующий стиль:

Содержание элементов будет варьироваться в зависимости от их размера шрифта и будет иметь линейный переход:

И теперь самая интересная часть. При наведении на элемент списка мы будем менять размеры шрифта и цвет:

Так как мы определили переход для каждого из этих элементов, изменения будут "анимированные".

Пример 2

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

Давайте определим две анимации. Первая начнется с вставки соответствующего элемента на 200% вниз по оси Y, что означает, что он будет сдвинут вниз. Кроме того, он будет иметь прозрачность 0. Затем он будет анимирован изменяя translateY до 0%:

Вторая анимация будет двигать элемент сверху по тем же принципам:

Пример 3

В этом примере мы хотим изменить фон и цвет текста при наведении курсора. Мы также будем поворачивать и увеличить иконку. Это мы можем сделать при помощи  transition и за счет увеличения размера шрифта иконки:

Пример 4

Примеры с 4 до 8 будут использовать другой макет для меню. Элементы будут располагаться рядом друг с другом:

Иконка будет размещена в верхней части, в центре пункта:

Враппер содержания будет размещен в нижней части элемента:

Основной и вторичный заголовок будут иметь следующий стиль:

При наведении мы размоем значок, изменим цвет фона и сдвинем элементы содержимого сверху и снизу:

Размывание значка происходит, когда мы устанавливаем его цвет как прозрачный и создаем ему тень текста с большим количеством размытости.

Анимация будет такой же, как та, которые мы использовали в одном из предыдущих примеров, за исключением перевода значений для анимации moveFromTop. Здесь мы установим translateY до -300%.

Пример 5

В пятом примере мы выдвинем значок слева, название справа и второстепенное название снизу:

Анимацию moveFromBottom мы уже знаем, давайте взглянем на moveFromLeft, которая передвигает соответствующий элемент влево, установив translateX до -100%, а затем перемещает его обратно в исходное положение:

В анимации moveFromRight мы установим  translateX (100%) на начальном этапе.

Пример 6

В этом примере мы хотим, чтобы название скользило слева, а также вращалось одновременно:

Анимация moveFromLeftRotate будет перемещать пункт и поворачивать его:

Пример 7

В этом примере мы установим второстепенное название в нижнюю часть элемента:

Мы хотим, чтобы название скользило снизу и также изменить цвет его фона. Иконка будет выезжать снизу, в то время как основное название будет увеличиваться:

Анимация smallToBig является примером того, как использовать трансформацию:

Пример 8

В этом примере, мы хотим увеличить весь элемент списка при наведении курсора. Мы сделаем это за счет его масштабирования до 1,1.

У нас также есть специальный span с иконкой ID #heart. Этот span будет красным и при наведении мы будем использовать анимацию smallToBig особым образом: мы будем бесконечно чередовать анимацию, создавая эффект бьющегося сердца.

Пример 9

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

Для того чтобы создать круг нам нужно установить border-radius до половины внешней ширины/высоты элемента.

Мы будем делать следующее при наведении:

Пункт будет поворачиваться на 360 градусов и основное название исчезнет, позволяя вторичному названию появится (его прозрачность было первоначально установлено в 0).

Пример 10

В последнем примере, элементы списка будут иметь левое поле -48px. Это позволит сделать перекрытия. Затем при наведении, мы будем масштабировать их и повышать z-индекс, так что активный пункт будет сверху:

И вот и всё! Надеюсь, вам понравилось эти маленькие эксперименты и найдете их полезными!

Пожалуйста, обратите внимание, что эта анимация и переходы будут работать только в последних версиях действительно современных веб-браузеров, такие как Google Chrome, Apple Safari и Mozilla Firefox.

Источник на англ. языке