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! ✨ You can transition grid tracks 👀... button:hover { --h: 1; } button { transition: grid-template-columns 0.2s; grid-template-columns: calc(var(--icon) * (1 - var(--h))) 1fr calc(var(--icon) * var(--h)); } Rad for this button concept! 🤙 CodePen.IO link below! 👇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 grid layout using HTML and CSS 🚀

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

little details: the intention of CSS :hover 👆 a::after... { transition: scale 0.26s; } a:is(:hover, :focus-visible)::after { transition-delay: 0.125s; } add a small transition-delay so you don't trigger :hover events whilst passing over an element unintentionallyshow 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

You can rotate the grid at any time and... align the elements to the rotated grid.show more

Create responsive holy grail layout with CSS grid 💪🚀

📌 2 lines of CSS to create a responsive Grid

The Grid and Snap To Grid are optional. You... can adjust the position, rotation, tile size (scale), height and type (hex/square) of the grid. At any time.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