using CSS grid you can avoid width change in... the parent container whilst making it responsive 🤙 the trick: update and transition the grid-template-columns for the list on :focus/:hover ✨show more

little details 👨‍🍳 tiny css transition-delay on :hover filters... noise and captures intent .text { transition: grid-template-columns 0.2s var(--ease); } button:hover .text { grid-template-columns: 1fr; transition-delay: 0.1s; }show more

CSS Tip! ✨ Did you know you can animate... CSS Grid tracks? 👀 ul:is(:hover,:focus-within) {--active: 1;} ul { grid-template-columns: auto repeat(3, calc(10px + (var(--active) * 100px))); transition: all 0.2s; } Adjust layouts based on interaction! 😎 CodePen.IO link below! 👇show more

Responsive table with resizable columns using HTML, CSS and... JavaScript 🚀 Code in the comments 🧑‍💻show more

An awesome CSS trick is to use :hover on... the container and :not(:hover) on the items that are not currently hovered to make more advanced effects 👇👨‍💻show more

kinda wild how far you can get with CSS... alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙show more

Built a list today and tried switching between list... and grid views with layout transition. Thought it’d be cool and it turned out pretty great! 🙌 Shoutout to Expo for making it so simple and Software Mansion’s reanimated for the smooth transitions. Here’s how it looks 👇show more

The best way to handle responsive tables: ◇ Measure... width and add scroll ◇ Sticky columns for context ◇ Pagination ◇ Keyboard (Arrow left/right)show more

one trick behind this demo 👇🎞️ .images { translate:... 0 calc(var(--active) * 1lh); } translate a container that holds the images with the line-height unit lean into CSS custom properties and use JavaScript to update the values 🤙show more

introducing: magnetic grid animation for Framer use this component... to create responsive image grids that react to your cursor with scale, rotation, magnetism, and more. comment 'GRID' and i’ll send you the component :)show more

don't know the size of a container in CSS?... container query units 🤝 translate a:hover .corner:nth-of-type(odd) { translate: 100cqi 0; } /* hover intent */ a:hover .corner { transition: translate 0.26s 0.12s; } adapts to content size 👇show more

Create responsive footer using just HTML and CSS 🚀... Code in the comments 🧑‍💻show more

You can only do this in Off The Grid

Notice how he keeps his center of gravity completely... grounded while maintaining precise stance width inside the grid. Every transition is explosive yet controlled, keeping the hips loaded and the baseline defense perfectly intact.show more

Whilst building the Base UI Data Grid, we've been... testing its capabilities by recreating real interfaces: 1. A music player inspired by Spotify's desktop app. Not your typical data grid, but it requires sorting, row selection, virtualization, and focus management.show more

Create responsive footer with subscribe form using CSS and... HTML 🚀 Code in the comments 🧑‍💻show more