Красивые эффекты для полей ввода на CSS3

12.01.2016

С появлением CSS3 у разработчиков появилась возможность добавлять простые с точки зрения реализации, но красивые и интересные эффекты к элементам интерфейса. Плавно раскрывающиеся меню, анимированные кнопки, выезжающие модальные окна — все эти мелкие «красивости», для которых раньше требовался JavaScript, теперь можно добавить буквально несколькими строчками CSS-кода. А впечатление от такого интерфейса совершенно иное.

Примерами таких несложных, но интересных эффектов могут служить эффекты для полей ввода, показанные Лукасом Беббером (Lucas Bebber) на codrops. Все они реализованы с помощью CSS transitions, CSS анимации и псевдо-элементов. Демо страницу со всеми эффектами можно посмотреть здесь.

Эффект под названием Nariko, пожалуй, один из самых простых, но это делает его совершенно универсальным. Его можно добавить к элементам формы практически на любом сайте, это придаст некоторую изюминку интерфейсу. Демонстрация этого эффекта показана ниже.

See the Pen WQLeMJ by Ekaterina Nazarova (@katienazarova) on CodePen.

Другие простые эффекты, такие как Manami, Yoshiko, Chisato, также могут использоваться практически везде. Есть и более вычурные, например, Shoko или Kozakura — их стоит использовать аккуратно.

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться