Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
This UI trick allows an entire card to act as a clickable target for a radio button, improving usability. It hides the native radio input and styles the card based on the `:checked` state of the input, all with pure HTML and CSS.
An input field with a label that initially acts as the placeholder. When the field is focused or text is entered, the label smoothly floats up and shrinks, providing persistent context without JavaScript.
A refined toast notification system featuring CSS-driven slide-in and slide-out animations, neat vertical stacking using flexbox, and an auto-dismiss progress bar with different visual states for success, info, and error messages.
This UI trick demonstrates how to create comfortably large tap targets for small buttons or icons, enhancing mobile usability and accessibility. By using `min-width`, `min-height`, and padding, the interactive area is expanded without visually scaling up the contained element.
Applies a smooth gradient mask to the top and bottom edges of a scrollable container, making content appear to melt into the background instead of ending abruptly. This creates a more polished and continuous user experience.
This UI trick demonstrates how to create a modal dialog that feels native by combining a dimmed and blurred backdrop with a subtle scale-in and fade-in animation, making the dialog appear with depth and focus.
This UI trick demonstrates how to use CSS `:user-invalid` and `:user-valid` pseudo-classes to provide polite form validation. Error or success states are only shown after a user interacts with an input field and blurs it, preventing accusatory messages on page load for empty, required fields.
This effect makes a list of items appear one after another with a slight delay and a subtle lift, giving the perception of a lighter, more fluid loading experience compared to an abrupt, simultaneous appearance.
A multi-step form that guides users through a checkout process with a clear visual progress indicator, enhancing perceived trust and reducing cognitive load.
A signup form demonstrating real-time inline validation feedback for email and password fields, coupled with clear, helpful error messages and a user-friendly single-column layout. The form highlights correct inputs with a green check and invalid ones with a red error icon and specific instructions.
Improve perceived load times by displaying a blurred, low-resolution image first, then transitioning smoothly to the sharp, high-resolution version. This keeps content present on screen, preventing a 'broken' blank state.
A search input that dynamically reveals a list of filtered results as the user types. Results can be navigated using arrow keys and selected with Enter, or by clicking/hovering with the mouse.