Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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

Adam Argyle

58,578 subscribers

127,962 views • 2 years ago •via X (Twitter)

Science & Technology #CSS

Anya Rossi• Live Now

Private livecam show

11 Comments

Adam Argyle2 years ago

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

Adam Argyle2 years ago

Nice on Android

CSS by T. Afif2 years ago

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 Argyle2 years ago

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

Kevin Powell2 years ago

This is so satisfying to watch 😅

General Randhal2 years ago

Awesome 👏

Wali Razzaq2 years ago

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

Andrew Gadzik ▲2 years ago

CSS is wild now!

Pramod2 years ago

I used similar for SlickWid!

James Vreeken2 years ago

Webflow cloneable version:

Adam Argyle2 years ago

fun!

Related Videos

#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,838 views • 2 years ago

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,147 views • 8 months ago

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

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

CodePen.IO

79,784 views • 1 year ago

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 views • 2 years ago

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

90,994 views • 2 years ago

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,134 views • 1 year ago

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 ʕ•ᴥ•ʔ

133,690 views • 1 year ago

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 views • 28 days ago

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,583 views • 10 months ago

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 ʕ•ᴥ•ʔ

71,933 views • 6 months ago

Tailwind devs: stop sleeping on container queries 😤

Tailwind devs: stop sleeping on container queries 😤

Ben Holmes

43,926 views • 1 year ago

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 views • 11 months ago

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 views • 1 year ago

😎👋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 views • 3 years ago

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 views • 1 year ago

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

34,419 views • 7 months ago

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 views • 1 month ago

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

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

Alamin

136,213 views • 3 years ago

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,853 views • 4 months ago