正在加载视频...

视频加载失败

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

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

Adam Argyle

58,645 subscribers

128,352 次观看 • 2 年前 •via X (Twitter)

科学技术 #CSS

Anya Rossi• Live Now

Private livecam show

11 条评论

Adam Argyle 的头像

Adam Argyle2 年前

Open Props for - light/dark normalize.css - nice buttons - premade animations - nice easings

Adam Argyle 的头像

Adam Argyle2 年前

Nice on Android

CSS by T. Afif 的头像

CSS by T. Afif2 年前

We can also make the same without the :has() selector and by using the implicit grid creation 🙂 (A related article if anyone is interested: @CodePen :

Adam Argyle 的头像

Adam Argyle2 年前

@CodePen nice! that's limited to only adapting children and not the parent too right? but that probably can get you super far 🤘🏻

Kevin Powell 的头像

Kevin Powell2 年前

This is so satisfying to watch 😅

General Randhal 的头像

General Randhal2 年前

Awesome 👏

Wali Razzaq 的头像

Wali Razzaq2 年前

We are the same @argyleink not in CSS of course, but in catching that resize handle 😆

Andrew Gadzik ▲ 的头像

Andrew Gadzik ▲2 年前

CSS is wild now!

Pramod 的头像

Pramod2 年前

I used similar for SlickWid!

James Vreeken 的头像

James Vreeken2 年前

Webflow cloneable version:

Adam Argyle 的头像

Adam Argyle2 年前

fun!

相关视频

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is an upgrade ✅ respects reduced motion ✅ keyboard still rocks

Adam Argyle

94,868 次观看 • 2 年前

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

jhey ʕ•ᴥ•ʔ

71,149 次观看 • 9 个月前

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

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

CodePen.IO

80,298 次观看 • 2 年前

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇

CSS Tip! ✨ You can make your component styles portable with container queries 😎 Change a card layout based on size 🔥 Remove button text when it's small 🤏 .card {container-type: inline-size;} @ container (min-width: 50ch) {.info { grid-column: 2; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

311,452 次观看 • 2 年前

Just on time to celebrate reaching 50 monthly @GitHub sponsors: 🚀Introducing draggables to anime.js V4! ✅ Inertia with spring animation ✅ Snap to grid ✅ Axis lock ✅ Container autoscroll ✅ Transformed container ✅ Quick swipe gestures ✅ onSnap callback And a lot more...

Just on time to celebrate reaching 50 monthly @GitHub sponsors: 🚀Introducing draggables to anime.js V4! ✅ Inertia with spring animation ✅ Snap to grid ✅ Axis lock ✅ Container autoscroll ✅ Transformed container ✅ Quick swipe gestures ✅ onSnap callback And a lot more...

Julian Garnier

91,025 次观看 • 2 年前

Huawei just unveiled its first foldable laptop - The MateBook Fold! 🤯 ✅ 18" 3.3K LTPO OLED display ✅ 13" (folded) | 4:3 aspect ratio ✅ 1.16 kg ✅ Kirin X90 SoC | 32GB RAM ✅ 1TB/2TB SSD ✅ 8MP front camera ✅ 74.69Wh battery | 140W ✅ HarmonyOS PC 💰 CNY 23,999 (~$3,300)

Huawei just unveiled its first foldable laptop - The MateBook Fold! 🤯 ✅ 18" 3.3K LTPO OLED display ✅ 13" (folded) | 4:3 aspect ratio ✅ 1.16 kg ✅ Kirin X90 SoC | 32GB RAM ✅ 1TB/2TB SSD ✅ 8MP front camera ✅ 74.69Wh battery | 140W ✅ HarmonyOS PC 💰 CNY 23,999 (~$3,300)

Shishir

740,360 次观看 • 1 年前

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

jhey ʕ•ᴥ•ʔ

138,071 次观看 • 1 年前

MiniMeters v1.0 [OUT NOW!!] ✅ Plug-Ins of Each Meter ✅ Audio Clipping / Recording ✅ VU Meter ✅ Quad Layout ✅ Transparent Windows ✅ Color Maps + like 100+ fixes and changes... Free update for current users. $20 for new users.

MiniMeters v1.0 [OUT NOW!!] ✅ Plug-Ins of Each Meter ✅ Audio Clipping / Recording ✅ VU Meter ✅ Quad Layout ✅ Transparent Windows ✅ Color Maps + like 100+ fixes and changes... Free update for current users. $20 for new users.

direct

59,678 次观看 • 10 个月前

Build & scale crypto products more efficiently 🚀 CoinGecko API now offers 3 flexible data delivery methods: ✅ REST: Ad-hoc & bulk queries ✅ WebSocket: Stream live prices & OHLCV charts ✅ Webhook: Instant metadata alerts Explore all 3 methods:

Build & scale crypto products more efficiently 🚀 CoinGecko API now offers 3 flexible data delivery methods: ✅ REST: Ad-hoc & bulk queries ✅ WebSocket: Stream live prices & OHLCV charts ✅ Webhook: Instant metadata alerts Explore all 3 methods:

CoinGecko

16,108 次观看 • 1 个月前

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

this year's editions page is a marvel – so many awesome details 👨‍🍳 honored to contribute, team smashed it 👏 beyond the incredible webgl work, there's crafty use of css container queries, counters, transitions/animations, and svg too!

jhey ʕ•ᴥ•ʔ

72,025 次观看 • 6 个月前

This 14-acre integrated farm layout features ✅500 goats ✅30 dairy cattle ✅5,000 poultry birds ✅A modern warehouse ✅A pasture garden for livestock feeding Designed for efficient livestock management and sustainable agriculture #IntegratedFarming

This 14-acre integrated farm layout features ✅500 goats ✅30 dairy cattle ✅5,000 poultry birds ✅A modern warehouse ✅A pasture garden for livestock feeding Designed for efficient livestock management and sustainable agriculture #IntegratedFarming

Denis Ongezo

11,089 次观看 • 1 年前

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

CSS macOS style dock nav with sub-menu 🤙 :has() for magnification ✅ [popover] for the sub-menu ✅ anchor() to tether the menu ✅ offset-path to put items on the curve ✅ linear() for the springy transition ✅ Combining cool APIs to create common UI patterns without JS ⭐️

jhey ʕ•ᴥ•ʔ

91,077 次观看 • 1 年前

Tailwind devs: stop sleeping on container queries 😤

Tailwind devs: stop sleeping on container queries 😤

Ben Holmes

43,926 次观看 • 1 年前

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

103,277 次观看 • 3 年前

Must Add Action Zone Breakers (Pat Kelsey) 1. Overload Wedge ✅ 2. Step-Up Wedge ✅ (Favorite) 3. Flare Overload ✅ 4. Overload Wedge B2B ✅

Must Add Action Zone Breakers (Pat Kelsey) 1. Overload Wedge ✅ 2. Step-Up Wedge ✅ (Favorite) 3. Flare Overload ✅ 4. Overload Wedge B2B ✅

Dustin Aubert

35,345 次观看 • 7 个月前

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 年前

Fable is finally getting showcased Jan 22🚀 ✅Reimagined Albion ✅Crowded towns, dense forests & fields ✅Has Fable’s core DNA ✅Moral choices affect the world ✅3rd-person view ✅Hybrid combat (melee, ranged & magic) Your wishes for this game?😎

Fable is finally getting showcased Jan 22🚀 ✅Reimagined Albion ✅Crowded towns, dense forests & fields ✅Has Fable’s core DNA ✅Moral choices affect the world ✅3rd-person view ✅Hybrid combat (melee, ranged & magic) Your wishes for this game?😎

Rino🚀

82,855 次观看 • 5 个月前

Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇 .section-header { ... container-type: scroll-state; container-name: sticky-hd; } @ container sticky-hd scroll-state(stuck: top) { ... } #CSS

Container scroll-state queries let you apply styles to elements based on the container's scroll state — stuck, snapped, or scrollable👇 .section-header { ... container-type: scroll-state; container-name: sticky-hd; } @ container sticky-hd scroll-state(stuck: top) { ... } #CSS

Bharat Kara

26,535 次观看 • 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 年前