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.
Attention: Note that we use modern CSS properties like a "viewport width or height" and "calc" property in this demo.
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!