Design Engineering Tip: One CSS property is responsible for... most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;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

Design Engineering Tip If your modal scrolls like this,... you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.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

Nice opportunity for transitioning CSS grid columns with :has()... && linear() 🤙 label { --selected: 0; grid-template-columns: auto calc(var(--selected) * 20px); } label svg { opacity: var(--selected); } label:has(:checked) { --selected: 1; }show more

Whoot! I just learned you can use animatable CSS... grid rows to transition an element's height from 0 to auto! Toggle a class and see the magic happen. Thx to Chris Coyier for sharing this little gem. 💯 Video alt: Exampe showing an animated height.show more

Design Engineering Tip Consider letting textareas grow with the... content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }show more

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

Probably the most annoying thing for me in animations... / scrollable content is how easy it is to just clip the content. Even if there is no border around to clip it with, adding masks is a one-liner in css now. (slowed down transition)show more

Big news: A new marketing template has just arrived.... ↳ Built with Next.js 15 & React 19 ↳ Tailwind CSS v4 beta and Motion ↳ Animated illustrations and grid layout Give it a spin:show more

SpaceXAI just launched a new Grok Grok Bot template... marketplace. There are template categories for engineering, sales, product, operations and finance, design and more. Marketplace:show more

The power of @ property Without it → CSS... treats --progress as text → no animation With it → CSS knows it's percentage → smooth animationshow more

made it even better! now it uses: - native... squircles/superellipse using css `corner-shape` property - separate X/Y border radii, so corners flatten horizontally without losing their heightshow more

💡 CSS Tip! Get the scroll progress of the... page as a CSS variable using a few lines of code ✅ Powered by Scroll driven animations ✅ Defined at the root level ✅ Typed using @​property ✅ You can easily use it within any formula CodePen.IO demo in the reply 👇show more

Create responsive holy grail layout with CSS grid 💪🚀

After my previous articles, I wondered: how many other... items from various CSS wishlists could I solve with scroll-driven animations? Styling rows and columns, staggered animations, wrap detection, and more — in my new article — “Position-Driven Styles”.show more

`autofill` on inputs is ugly by default the background... bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.show more

Got carried away with this interactive module for breaking... down the CSS mask-image propertyshow more

Hotel management dashboard template. Built with React, Tailwind CSS... & shadcn/ui 👇👇show more