正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

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;

Gabriel

7,043 subscribers

104,365 次观看 • 7 天前 •via X (Twitter)

教育科学技术

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

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; }

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; }

jhey ʕ•ᴥ•ʔ

59,207 次观看 • 7 个月前

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! 👇

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! 👇

jhey ʕ•ᴥ•ʔ

30,561 次观看 • 3 年前

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; }

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; }

jhey ʕ•ᴥ•ʔ

225,181 次观看 • 2 年前

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.

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.

Stefan Judis

238,279 次观看 • 3 年前

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; }

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; }

Gabriel

85,295 次观看 • 1 个月前

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 ✨

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 ✨

jhey ʕ•ᴥ•ʔ

270,692 次观看 • 1 年前

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)

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)

Dima Belyaev

27,653 次观看 • 6 个月前

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

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

Victor

20,744 次观看 • 2 个月前

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”.

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”.

Roma Komarov (inactive)

37,613 次观看 • 3 年前

Create responsive holy grail layout with CSS grid 💪🚀

Create responsive holy grail layout with CSS grid 💪🚀

David Mráz

133,448 次观看 • 2 年前

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

📝 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up By adding a long transition-delay to a CSS property under certain conditions (with a Style Query), you can persist its value Demo by Fabrizio Calderan

Bram.us (by @bramus)

15,624 次观看 • 1 年前

`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.

`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.

zenith

83,224 次观看 • 4 个月前

Got carried away with this interactive module for breaking down the CSS mask-image property

Got carried away with this interactive module for breaking down the CSS mask-image property

rauno

31,639 次观看 • 11 个月前

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

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

Toby

89,083 次观看 • 3 个月前

One of the most slept on use cases of Framer's design pages is using it as a place to host your template documentation. Your project stays organised and your customers get a better experience, win-win.

One of the most slept on use cases of Framer's design pages is using it as a place to host your template documentation. Your project stays organised and your customers get a better experience, win-win.

Hamza Ehsan

13,649 次观看 • 5 个月前

Someone just broke the paywall on Claude Design… and almost no one noticed. It’s called Open Design. No subscription. No limits. No “Pro plan required.” Just raw access. 👉 Turn prompts into real UI/UX 👉 Generate designs with Claude 👉 Replace expensive design tools 👉 Fully customizable (open source) This isn’t a tool. It’s a shortcut around the entire design economy. Most people will ignore this. A few will build insane things with it. Guess which side wins. Save this before it explodes Repo:

Someone just broke the paywall on Claude Design… and almost no one noticed. It’s called Open Design. No subscription. No limits. No “Pro plan required.” Just raw access. 👉 Turn prompts into real UI/UX 👉 Generate designs with Claude 👉 Replace expensive design tools 👉 Fully customizable (open source) This isn’t a tool. It’s a shortcut around the entire design economy. Most people will ignore this. A few will build insane things with it. Guess which side wins. Save this before it explodes Repo:

Leonard Rodman

29,155 次观看 • 2 个月前

🎨 Native CSS Variables: change one token, update your whole site. Keep design systems tight with Oxygen 6

🎨 Native CSS Variables: change one token, update your whole site. Keep design systems tight with Oxygen 6

Oxygen

127,952 次观看 • 1 年前

One of the most underrated CSS props is definitely scroll snapping, it feels insane to me that these carousels are possible with CSS alone 🤯 This just went live on AtoBeach - meaning gesture support now works! 🥳

One of the most underrated CSS props is definitely scroll snapping, it feels insane to me that these carousels are possible with CSS alone 🤯 This just went live on AtoBeach - meaning gesture support now works! 🥳

Charlie J

61,369 次观看 • 3 个月前