Some More Inspiration for Text Input Effects

A couple of more inspirational styles for text input effects including some new techniques and ideas.
TextInputEffects_Set2

From our monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

We’ve updated and added some more effects to the Inspiration for Text Input Ideas. The second set contains some more styles that we thought about and collected after we released the first set about three month ago. The concept is the same: make (subtle) enhancements for text inputs to make them more engaging and fun.

We are excited to show you the new set as it contains some different techniques, including moving shapes and lines that create the illusion of a jelly movement.

TextInput

As in the previous set we mostly use CSS transitions and sometimes CSS animations on the label element or on pseudo-elements. We are using the same structure (with some special cases) as in the previous set.

Please note that the effects have been tested in the latest versions of modern browsers. They might not work as expected in older browsers.

Read the original article here: Inspiration for Text Input Ideas

Demos

We’ve added a second set of effects:

We hope you enjoy this new set and find it inspiring!

Tagged with:

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 28

Comments are closed.
  1. LOL, I couldn’t help but laugh at first wave effect. Inputs gettin’ down & funkay with the dance moves

  2. You are making me giggle like a little child. If any of us create a boring website it is our own fault. Thanks for all your amazing creativity and willingness to give these inspirations away for free!

  3. Wow! Mary you are routemaker of the new material design concept. In this tutorial Every effcet, specialy NAU effect is mindblowing

  4. Awesome. I love the first one, i’m definitely using it in my next projects.

  5. You always amaze me with the variety of stuff you bring here. I love this site and all the wonderful techniques I learn from it. Great job!

  6. Iam impressed with all this designs. I want to add them in my blog , so can u guide/help me out in seting up ,plzzz