—»     —»   Анимируем CSS3-градации
  Раздел: Анимация, CSS/Style Sheets   Нет комментариев  

Анимируем CSS3-градации



Спецификация CSS Transitions вобрала в себя перечень параметров, которые можно «оживить». Данный список, насколько нам известно, охватывает анимационные параметры как для переходов, так и для покадровой анимации.

Но это всего лишь список параметров, не больше. И так как CSS3-градации – это не совсем параметры, а изображения, создаваемые браузером, они, очевидно, не входят в этот перечень параметров с возможностью анимации. Но это не значит, что вы не можете «оживить» градации.

Градации, как и стандартные изображения, представляют собой субъект конкретного параметра, связанного с фоном, и который можно анимировать. Например, background-size и background-position.

Анимируем CSS3-градации

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

* Посмотреть демо

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

.two:link, .two:visited {
background: #2876b2;
background: -webkit-linear-gradient(#2876b2, #549ad0);
background: -moz-linear-gradient(#2876b2, #549ad0);
background: -o-linear-gradient(#2876b2, #549ad0);
background: -ms-linear-gradient(#2876b2, #549ad0);
background: linear-gradient(#2876b2, #549ad0);
background-repeat: repeat;
-webkit-background-size: 100% 200%;
-moz-background-size: 100% 200%;
background-size: 100% 200%;
-webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-ms-transition: all .5s linear;
transition: all .5s linear;
}

.two:hover, .two:focus, .two:active {
background-position: 0 -102%;
}

Мы задали значение repeat для фона этой кнопки, но нам не нужно делать этого, так как он будет повторяться по умолчанию. Это только лишь для того, чтобы продемонстрировать вам, что здесь происходит. При наведении меняется позиция фона, и когда вы комбинируете это со значением background-size, получается эффект скольжения вниз. Таким образом, градация, которая повторяется, просто смещается на другую позицию.

К тому же, мы сделали одинаковый эффект для кнопки в положениях hover, focus и active, но вы можете задавать разную анимацию на различных положениях для всех этих псевдо-классов.

Другие кнопки с градацией на демо-странице выглядят немного абстрактно с точки зрения поведения анимации, но принцип реализации примерно тот же: мы выставляем повторяющуюся градацию с уникальными значениями background-size, и анимируем фон за счет изменения значений background-position и/или background-size.

Данный метод был применен при разработке кнопок для сайта HTML9 Boilerstrap.

В принципе, возможности здесь почти безграничны, но эти небольшие примеры должны наглядно вам все продемонстрировать. Мы уверены, что вы сможете самостоятельно добиться очень впечатляющих эффектов, так что не забудьте потом в комментариях поделиться результатами ваших экспериментов! Если вам необходим источник вдохновения для создания градаций, вы можете обратиться к галерее градационных текстур от Леа Вероу (Lea Verou).
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5195   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Магазины торгующие новогодними электрогирляндами http://гирлянда24.рф
гирлянда24.рф
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930