Создаем кнопки на CSS3. Шаг 2: Радиоактивные кнопки

Мы только-только освоились с CSS3 в статье Создаем кнопки на CSS3. Шаг 1: Потрясающие кнопки, теперь давайте сделаем нечто большее.

Все чаще и чаще клиенты заказывают что-то необычное, выделяющееся, стильное, что бы приковывало взгляд.
Так и родилась идея дизайна радиоактивных кнопок, которые, как-бы пульсировали на странице, привлекая зрителя.

Китч? Может быть.
Но не смотря на свою непрактичность, такие кнопки нужны для сайтов и клиентов, для которых “Вау!” фактор очень важен.

Давайте отбросим все JS уловки и трюки и реализуем анимацию таких кнопок на CSS3.
Поехали...

Анимация без JavaScript

Секрет радиоактивных кнопок в новом CSS3 свойстве, именуемым анимацией (или официально -webkit-animation и -moz-animation).

Наши радиоактивные кнопки структурно и стилистически индентичны кнопкам из Шага 1, но в них есть одно отличие. Вместо статичного drop-shadow, мы использовали свойство box-shadow, чтобы создать свечение вокруг кнопки.

Создание анимации

Первый шаг в создании анимации для наших кнопок — это назначение событий, меняющих за определенное время CSS свойства кнопок. Давайте посмотрим на эти странные свойства:

Как работает код:

• @-webkit-keyframes говорит браузеру, что анимация будет базироватся на основе ключевых фреймов или точек. Соответственно, браузер будет знать, что между ними и нужно плавно менять свойства.
• greenPulse — название анимации. Присоединяется к объектам, для которых нужна анимация.
• from { … } определяет начальную точку анимации; в нашем случае, такой же фон для кнопки и box-shadow цвет (один частично исчезнет на заднем плане).
• 50% { … } означает, что прошла половина изменений анимации.
• to { … } определяет последний фрейм в анимации. Обратите внимание, что анимация вернется к ее начальному состоянию. Т.е. она не остановится на последнем фрейме. Это означает, что плавная анимация должна начинаться и заканчиваться одними и теми же свойствами и значениями.

Хорошо, мы сделали анимацию. Наш объект меняет box-shadow цвет с зеленого на серый, а потом наборот. Теперь нам нужно сделать его активным. Т.е. не забыть применить название объекта на наши кнопки.

Очень удобно, не правда ли? У -webkit-animation есть множество способов применения и, в сочетании с очень простым JavaScript (например, OnClick), вы можете создавать впечатляющие эффекты и различные взаимодействия, не прибегая к библиотеке JavaScript эффектов.

PS. Кстати, не плохая идея, реализовать плагин для WordPress, с использованием наших наборов кнопок. Такие наборы очень хорошо подходят для рекламы или промо акций. Вобщем там где нужен акцент на дизайне.

PSS. Как говорил один мой знакомый: «Машина, друг человека!» Попробуйте, например, купить хонду и вы поймете, как хороша жизнь на четырехколесном друге.