Ideas for Proximity Feedback with Progressive Hover Effects
In Playground by Manoela Ilic
We’re exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it.
form
Inspiration for Search UI Effects
In Playground by Manoela Ilic
A couple of schematic, inspirational proof-of-concepts for how to show the search interface on a website using CSS animations.
Block Reveal Effects
In Playground by Manoela Ilic
Ideas for revealing content in a schematic box look as seen around the Web lately. The effect first shows a decorative block element drawn and when it starts to decrease its size, it uncovers some content underneath.
Styling & Customizing File Inputs the Smart Way
In Tutorials by Osvaldas Valutis
A tutorial on how to style and customize <input type=”file”> in a semantic, accessible way using the <label> element and some JavaScript.
Some More Inspiration for Text Input Effects
In Playground by Manoela Ilic
A couple of more inspirational styles for text input effects including some new techniques and ideas.
Inspiration for Text Input Effects
In Playground by Manoela Ilic
Some inspiration for effects on text inputs using CSS transitions, animations and pseudo-elements.
Elastic SVG Elements
In Playground by Manoela Ilic
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
Fullscreen Form Interface
In Playground by Manoela Ilic
An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.
Minimal Form Interface
In Playground by Manoela Ilic
A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website.
Labels: Managing User Expectations
In Articles by Patrick Cox
An article about how to manage user expectations by properly labeling UI components. The better users are able to predict what an interaction will do, the more trust can be built, enabling the user to smoothly navigate a website and perform actions in a comfortable way.
Responsive Multi-Column Form
In Blueprints by Manoela Ilic
A responsive multi-column form with example media queries for a flexible layout.
Natural Language Form with Custom Input Elements
In Tutorials by Manoela Ilic
An experimental form that uses natural language instead of the usual form display. Values are entered using custom input elements.
Custom Login Form Styling
In Tutorials by Kitty Giraudel
In this tutorial we will create some modern and creative login forms using some interesting CSS techniques and HTML5 goodness.
Designing the Dreaded Form: Getting Creative
In Articles by Patrick Cox
In this follow-up article about designing forms we’ll dig into how to actually become creative and apply some interesting design concepts to spice up your form.
Designing the Dreaded Form
In Articles by Patrick Cox
As much as they are dreaded, forms play an important role in many websites and designing them should involve careful planning of their layout.
Enhance Required Form Fields with CSS3
In Tutorials by Manoela Ilic
Enhance required fields in a form with this little effect. The idea is to allow better visibility for obligatory fields while de-emphasizing optional ones.
Login and Registration Form with HTML5 and CSS3
In Tutorials by Stéphanie Walter
A tutorial on how to create a switching login and registration form with HTML5 and CSS3.
Animated Form Switching with jQuery
In Tutorials by Manoela Ilic
In this tutorial we will create a simple animated form switch with three very common forms. The idea is not to leave the page when the user goes to another […]
