Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

argyleink's profile picture

Adam Argyle

58,650 subscribers

128,349 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & Teknoloji#CSS
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Adam Argyle profil fotoğrafı
Adam Argyle2 yıl önce

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

Adam Argyle profil fotoğrafı
Adam Argyle2 yıl önce

Nice on Android

CSS by T. Afif profil fotoğrafı
CSS by T. Afif2 yıl önce

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 profil fotoğrafı
Adam Argyle2 yıl önce

@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 profil fotoğrafı
Kevin Powell2 yıl önce

This is so satisfying to watch 😅

General Randhal profil fotoğrafı
General Randhal2 yıl önce

Awesome 👏

Wali Razzaq profil fotoğrafı
Wali Razzaq2 yıl önce

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

Andrew Gadzik ▲ profil fotoğrafı
Andrew Gadzik ▲2 yıl önce

CSS is wild now!

Pramod profil fotoğrafı
Pramod2 yıl önce

I used similar for SlickWid!

James Vreeken profil fotoğrafı
James Vreeken2 yıl önce

Webflow cloneable version:

Adam Argyle profil fotoğrafı
Adam Argyle2 yıl önce

fun!

Benzer Videolar

#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 görüntüleme • 2 yıl önce

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 görüntüleme • 8 ay önce

"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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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

Tailwind devs: stop sleeping on container queries 😤

Ben Holmes

43,926 görüntüleme • 1 yıl önce

😎👋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 görüntüleme • 3 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 7 ay önce

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 görüntüleme • 1 ay önce

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 görüntüleme • 3 yıl önce