Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

argyleink's profile picture

Adam Argyle

58,631 subscribers

128,343 Aufrufe • vor 2 Jahren •via X (Twitter)

Wissenschaft & Technologie#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Adam Argyle
Adam Argylevor 2 Jahren

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

Profilbild von Adam Argyle
Adam Argylevor 2 Jahren

Nice on Android

Profilbild von CSS by T. Afif
CSS by T. Afifvor 2 Jahren

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 :

Profilbild von Adam Argyle
Adam Argylevor 2 Jahren

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

Profilbild von Kevin Powell
Kevin Powellvor 2 Jahren

This is so satisfying to watch 😅

Profilbild von General Randhal
General Randhalvor 2 Jahren

Awesome 👏

Profilbild von Wali Razzaq
Wali Razzaqvor 2 Jahren

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

Profilbild von Andrew Gadzik ▲
Andrew Gadzik ▲vor 2 Jahren

CSS is wild now!

Profilbild von Pramod
Pramodvor 2 Jahren

I used similar for SlickWid!

Profilbild von James Vreeken
James Vreekenvor 2 Jahren

Webflow cloneable version:

Profilbild von Adam Argyle
Adam Argylevor 2 Jahren

fun!

Ähnliche 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
0:21

#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 Aufrufe • vor 2 Jahren

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

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

jhey ʕ•ᴥ•ʔ

71,149 Aufrufe • vor 8 Monaten

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

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

CodePen.IO

80,298 Aufrufe • vor 1 Jahr

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 👇
0:28

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 Aufrufe • vor 2 Jahren

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...
0:55

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 Aufrufe • vor 2 Jahren

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)
0:51

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 Aufrufe • vor 1 Jahr

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%); } }
0:36

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 Aufrufe • vor 1 Jahr

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.
0:29

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,630 Aufrufe • vor 10 Monaten

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:
0:44

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 Aufrufe • vor 1 Monat

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!
0:23

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 Aufrufe • vor 6 Monaten

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
2:03

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 Aufrufe • vor 1 Jahr

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 ⭐️
0:33

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 Aufrufe • vor 1 Jahr

Tailwind devs: stop sleeping on container queries 😤
0:59

Tailwind devs: stop sleeping on container queries 😤

Ben Holmes

43,926 Aufrufe • vor 1 Jahr

😎👋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
0:26

😎👋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 Aufrufe • vor 3 Jahren

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 ✅
0:22

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 Aufrufe • vor 1 Jahr

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

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 Aufrufe • vor 7 Monaten

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?😎
0:39

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 Aufrufe • vor 5 Monaten

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
0:20

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 Aufrufe • vor 1 Monat

Learn CSS Grid Layout. Animated tutorial makes learning CSS easier.
0:39

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

Alamin

136,213 Aufrufe • vor 3 Jahren