正在加载视频...

视频加载失败

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

"Always great grid - CSS grid + :has() + view transitions" by Adam Argyle

CodePen.IO

203,859 subscribers

80,298 次观看 • 2 年前 •via X (Twitter)

教育科学技术艺术

Anya Rossi• Live Now

Private livecam show

6 条评论

🍥kvndy 的头像

🍥kvndy2 年前

It’s impressive but I can’t believe people don’t care about the visual discrepancy on interruption. Are there seriously no designers who notice?

Didier Catz 的头像

Didier Catz2 年前

@argyleink These seem to be reversible/interruptible. Is this new or are my eyes deceiving me? Haven't seen view transitions do that before.

Snowmanzzz.html (寻170cm女生) 的头像

Snowmanzzz.html (寻170cm女生)2 年前

Hope for a tut @css @css

Nacho 的头像

Nacho2 年前

@GonzaMontii 👀👀

James Philip 🔥 的头像

James Philip 🔥2 年前

@assertchris

Mohammad Hossein Khadem al - Mahdi 的头像

Mohammad Hossein Khadem al - Mahdi2 年前

very good

相关视频

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

Adam Argyle

128,352 次观看 • 2 年前

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

you can stack elements with css grid/subgrid by giving them the same grid position 🧑‍🍳 this scroll track window is a great use case for css grid + position: sticky catch the 3D breakdown 👇

jhey ʕ•ᴥ•ʔ

128,603 次观看 • 6 个月前

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

Future UI && CSS Tip! 🔮 You could use View Transitions to animate CSS grid position and create an OSX-style exposé for a portfolio 🔥 It's a grid where things move based on state. Wrapped in a VT 🤙 [data-expose] section{ grid-area:var(--x)/var(--y); } CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

171,324 次观看 • 2 年前

Master CSS Grid in 2 CSS lines!

Master CSS Grid in 2 CSS lines!

Ania Kubów #JavaScriptGames

67,365 次观看 • 1 年前

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.

Alamin

136,213 次观看 • 3 年前

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Are you using position: absolute; to overlap elements? It's almost always better to Use CSS Grid instead!

Wes Bos

302,109 次观看 • 1 年前

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

a smoother radius transform version using css. no framer motion used here. for auto height transition using css `grid` inspired by jhey ʕ•ᴥ•ʔ. when collapsed `grid-rows-[0fr]` and expanded `grid-rows-[1fr]`. and that with `ease-out-cubic` with `300ms` makes it feel just perfect ~

Soren

114,785 次观看 • 8 个月前

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

CSS sidebar tricks 🤌 transition expanded menu items to "auto" height using grid li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; }

jhey ʕ•ᴥ•ʔ

117,444 次观看 • 1 年前

Learn CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Learn CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Alamin

173,886 次观看 • 3 年前

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,158 次观看 • 9 个月前

Learn Responsive CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Learn Responsive CSS GRID 🔥 ➼ Animated tutorial makes learning easier.

Alamin

102,739 次观看 • 3 年前

Learn CSS GRID (align-content) 🔥 ➼ Animated tutorial makes learning easier.

Learn CSS GRID (align-content) 🔥 ➼ Animated tutorial makes learning easier.

Alamin

85,495 次观看 • 3 年前

New timeline component pushes CSS grid to its absolute limit 🥵

New timeline component pushes CSS grid to its absolute limit 🥵

Caleb Porzio ⚡️

151,123 次观看 • 4 个月前

CSS Grid ( justify-content ) 🔥 ➼ The animated tutorial makes learning easier.

CSS Grid ( justify-content ) 🔥 ➼ The animated tutorial makes learning easier.

Alamin

46,145 次观看 • 3 年前

Learn CSS GRID (justify-content) 🔥 ➼ Animated tutorial makes learning easier.

Learn CSS GRID (justify-content) 🔥 ➼ Animated tutorial makes learning easier.

Alamin

125,453 次观看 • 3 年前

Quickly and easily create a CSS Grid layout for your website!

Quickly and easily create a CSS Grid layout for your website!

Marko Denic

211,198 次观看 • 1 年前

Here is a patch to test CSS grid in React native.

Here is a patch to test CSS grid in React native.

nishan (o^▽^o)

68,412 次观看 • 6 个月前

The CSS Grid Builder that now ships with Gutenberg is 🔥👇

The CSS Grid Builder that now ships with Gutenberg is 🔥👇

Jamie Marsland - Head of WordPress YouTube ❤️

17,045 次观看 • 2 年前

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Quick tutorial on how to stack elements using CSS grid instead of position absolute:

Jess Chan | Coder Coder

11,606 次观看 • 2 个月前

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

285,140 次观看 • 1 年前