Загрузка видео...

Не удалось загрузить видео

На главную

#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 просмотров • 2 лет назад •via X (Twitter)

Наука и технологии#CSS
LIVE

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
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,868 просмотров • 2 лет назад

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 просмотров • 8 месяцев назад

"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 просмотров • 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 👇
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 просмотров • 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...
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 просмотров • 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)
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 просмотров • 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%); } }
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 просмотров • 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.
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 просмотров • 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:
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 просмотров • 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!
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 ʕ•ᴥ•ʔ

72,011 просмотров • 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
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 просмотров • 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 ⭐️
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 просмотров • 1 год назад

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

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
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 просмотров • 3 лет назад

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 просмотров • 5 месяцев назад

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 просмотров • 1 год назад

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 просмотров • 7 месяцев назад

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 просмотров • 1 месяц назад

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 просмотров • 3 лет назад