12 эффектов для социальных кнопок

Как они сделаны

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

• Transition – свойство transition устанавливает продолжительность времени, за которое свойства CSS могут изменить свои значения, таким образом создавая плавную анимацию. Не забудьте проверить, что эти свойства делают (например, delay и timing-function) и как использовать их в своих интересах.
• Transform – оно позволяет перемещать, поворачивать, масштабировать и много чего еще делать с размерами и положением ваших HTML элементов. Его полномочия не ограничиваются только 2D плоскостью, но и работают в 3D.
• Filter – еще одна новая функция CSS3, она позволяет разработчикам применять фотографические эффекты к изображениям, таким образом, делая их черно-белыми, размытыми, насыщенными и так далее. Обратите внимание, что это свойство не работает в Internet Explorer.

В примере под номером 2 мы добавили немного манипуляций клссами с помощью jQuery. А в примере 3 использовали интересный jQuery-плагин под названием jRumble. Правда он больше не обновляется и вместо него мы рекомендуем использовать CSS-библиотеку CSShake. Попробуйте – это потрясающе!

Надеемся, вам понравится наша коллекция эффектов. Проверьте все демо-примеры и напишите, который понравился больше.