Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
Prevents layout shifts in sortable table headers by reserving space for the sort icon using `opacity` instead of removing it from the DOM. Includes hover and active states for discoverability.
A responsive gallery where hovering over a panel expands it, causing other panels to gracefully shrink. This effect is achieved purely with CSS flexbox and transitions, leveraging the `flex` property.
A responsive 3D card that flips on hover, revealing its back face with a smooth, spring-like animation, using pure CSS perspective and transform properties.
A button that subtly follows the cursor with a magnetic pull, featuring a parallax effect on its inner label for added depth. It smoothly springs back to its original position when the cursor leaves.
A sleek card component featuring a dynamic radial glow that follows the user's cursor, illuminating both the card's surface and its border. This effect is achieved using CSS custom properties for cursor position and layered radial gradients with advanced masking.
Achieve elegant, instantly readable data tables with automatic zebra striping using CSS `nth-child(even)` and a subtle hover highlight. No manual row classes are needed, ensuring the pattern remains correct even when data changes.
A credit card-like element with an iridescent, oil-slick finish that appears to shimmer and reflect light as it's hovered, creating a captivating holographic effect purely with CSS gradients and transforms.
A modern, zero-JavaScript tooltip that automatically positions itself relative to its trigger and flips its vertical alignment (above/below) if it's about to go off-screen, leveraging the native Popover API and CSS Anchor Positioning.
Demonstrates the CSS :has() selector by creating a gallery where hovering over one item dims all other items, effectively spotlighting the hovered element purely with CSS.
A modern button design featuring a translucent gradient background, a blurred backdrop-filter for a glass-like appearance, and a vibrant glowing shadow. It reacts subtly on hover and reveals an animated background blur.
A group of circular avatars that overlap using negative margins, smoothly fanning out with a positive margin on hover. This effect is achieved with pure CSS, utilizing flexbox and transitions.
Create a tooltip using only CSS, leveraging the `::after` pseudo-element and `attr(data-tip)` to display content on hover, with a smooth fade-in transition.