We use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

With this article, we are starting with a new category called "Snippets". In this category, we will show how to solve big problems with little code snippets. We will try to animate all "atoms" of frontend coding: input fields, tabs, accordions, images, paragraphs, cards etc. All stuff that isn't so complex to come into "Challenges" category will come in this "Snippets" category.

COIDEA - Animated Input Error Message

Attention: Note that we use modern CSS properties like a "viewport width or height" and "calc" property in this demo.

In "Snippets" category we will try to write as less as possible Javascript, jQuery, HTML or CSS code. That will help you to copy/paste the code in only a few seconds and to easily use in your personal and commercial projects.

All designs in "Snippets" category will come in the minimal form and we will stay focused to create simple animations and to give you good content. As the first example, we decided to create one simple error animation of the password input field. Feel free to see our "Demo", type some text and click on "unlocked" icon to see the magic.

We hope you like this little effect and find it useful!

References and Credits