Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

Коллекция CSS3 эффектов :hover

Собрал коллекцию CSS3 эффектов, которые работают при наведении курсора и могут быть применены к ссылка, кнопкам, логотипам, SVG и так далее. Их легко применить к элементам проекта где угодно и когда угодно. Все эфекты содержатся в Hover CSS

О Hover.css

Все эффекты Hover.css скомпилированы для одного элемента и использует свой класс (с помощью псевдо-элементов где это необходимо), так что вы можете легко скопировать и вставить их в свой проект. Старым версиям браузеров, которые не поддерживают эти функции css3 может потребоваться некоторая дополнительная настрока. Я имею ввиду префиксы -webkit-, -moz- и т.д.

2D Transitions

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out

Background Transitions

Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

Icons

Использованы иконки FontAwesome.

Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out

Border Transitions

Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right

Shadow and Glow Transitions

Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset

Speech Bubbles

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

Curls

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

Пользуйтесь, лиценция Hover.css - open source

Последнее изменениеСреда, 27 Июль 2016 10:26
  • Оцените материал
    (3 голосов)
  • Опубликовано в CSS
  • Прочитано 6060 раз
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru

Оставить комментарий

You have no rights to post comments

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

Я сам вдохновляюсь материалами, которые предлагаются вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, макетов и т.д.), и по возможности всегда сохраняется ссылка на источники, и сообщается  автор изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые здесь предоставлены, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то ему придется самостоятельно искать настоящего автора материала.