正在加载视频...

视频加载失败

返回首页

Animated exclusive accordions with CSS 😎 ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: calc-size(auto); } Exclusive On the way! 🫶

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,402 subscribers

216,567 次观看 • 2 年前 •via X (Twitter)

科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

Here's the @CodePen 🤙 You can see it work in Chrome Beta. Not sure if there's a bug in Chrome Canary atm 🥲

apuestokid 的头像
apuestokid2 年前

Look at this. more simple, more supported:

Fredrik Tibbling 的头像
Fredrik Tibbling2 年前

It’a a keeper! ✨

Sam Gilbert 的头像
Sam Gilbert2 年前

i have bookmarked way too many of these 🔥

Engels Prado 的头像
Engels Prado2 年前

Looking at your posts about css, I realized that I know nothing about css 🤣.

thatguyjk 🕵🏾‍ 的头像
thatguyjk 🕵🏾‍2 年前

Are you using chrome canary?

jhey ▲🐻🎈 的头像
jhey ▲🐻🎈2 年前

Chrome BETA. There seems to be an issue in Chrome Canary where ::details-content styling isn't being applied for some reason 🤔

D7460N 的头像
D7460N2 年前

Finally!

Umair 的头像
Umair2 年前

calc-size(auto); how its works

Scott Kaye 的头像
Scott Kaye2 年前

killer, always killer, nice stuff!

相关视频

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }
0:25

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,149 次观看 • 1 年前

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}
0:22

Neat piece is the responsive morph using CSS min() ✨ [popover] { transition-property: display, width, height; transition-behavior: allow-discrete; width: anchor-size(width); @​starting-style { width: min(640px, 100vw - 2rem); }}

jhey ʕ•ᴥ•ʔ

64,806 次观看 • 1 年前

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳
0:36

responsive CSS pinned sidebar transition 📌 .layout:has(:popover-open) { grid-template-columns: var(--sidebar-width) 1fr; } aside:popover-open { translate: 0 var(--ctrl); height: var(--extend); } actual zero JS for the layout transition here so many details to play with! 🧑‍🍳

jhey ʕ•ᴥ•ʔ

386,721 次观看 • 10 个月前

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍
0:28

sidebar details 🤌 CSS auto-height transition w/ grid 🎬 li > div[inert] { grid-template-rows: 0fr; } li > div { grid-template-rows: 1fr; transition: grid-template-rows .26s; } arrow keys for navigation 📍

jhey ʕ•ᴥ•ʔ

118,446 次观看 • 10 个月前

✨ Exclusive hindi arabic telugu mallu tango chatmet Content 📷 DM on Telegram for details (link in bio )
3:05

Sensitive content

✨ Exclusive hindi arabic telugu mallu tango chatmet Content 📷 DM on Telegram for details (link in bio )

all things u want

26,829 次观看 • 6 个月前

✨ Exclusive hindi arabic telugu mallu tango chatmet Content 📷 DM on Telegram for details link in bio
4:37

✨ Exclusive hindi arabic telugu mallu tango chatmet Content 📷 DM on Telegram for details link in bio

stuff

52,079 次观看 • 5 个月前

note to self: revisit pixelated transition effects this is a "similar" experiment but relies only on css mask and a randomly generated sprite 🤙 idea was to extend it to scroll reveals, popover transitions, details/summary, etc.
0:50

note to self: revisit pixelated transition effects this is a "similar" experiment but relies only on css mask and a randomly generated sprite 🤙 idea was to extend it to scroll reveals, popover transitions, details/summary, etc.

jhey ʕ•ᴥ•ʔ

17,454 次观看 • 2 个月前

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇
1:31

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,234 次观看 • 2 年前

Looking for festive ideas with the kids? 🎅 CBeebies Panto: Robin Hood is available to watch in cinemas nationwide from 1st Dec, with exclusive content! For ticket details, visit #CBeebiesPanto
0:55

Looking for festive ideas with the kids? 🎅 CBeebies Panto: Robin Hood is available to watch in cinemas nationwide from 1st Dec, with exclusive content! For ticket details, visit #CBeebiesPanto

CBeebies Parenting

32,336 次观看 • 2 年前

🚨 EXCLUSIVE: A robot dog has been spotted walking the streets of HSR Layout, Bengaluru. Here's the details: Dog name: PARAM Creator: General Autonomy Weight: 35kg Max payload: 20kg Top speed: 3m/s Jump height: 1m Battery: 8 hours + hot swapping Commercially available: ~Q2 2026
0:56

🚨 EXCLUSIVE: A robot dog has been spotted walking the streets of HSR Layout, Bengaluru. Here's the details: Dog name: PARAM Creator: General Autonomy Weight: 35kg Max payload: 20kg Top speed: 3m/s Jump height: 1m Battery: 8 hours + hot swapping Commercially available: ~Q2 2026

Runtime

83,170 次观看 • 8 个月前

We added two properties to the Scroll Constraint options that you can animate and control with the State Machine: - Scroll Percent X/Y: 0-100% dynamically computed based on the viewport and content size - Scroll Index: scroll to a specific child item by index - See docs for details:
0:28

We added two properties to the Scroll Constraint options that you can animate and control with the State Machine: - Scroll Percent X/Y: 0-100% dynamically computed based on the viewport and content size - Scroll Index: scroll to a specific child item by index - See docs for details:

Rive

16,536 次观看 • 1 年前

"It would be the biggest deal in AFL history by some way." Callum Twomey with exclusive details on the two-year offer with a further NINE-year player option Harley Reid's management have put to West Coast. #9FootyClassified | Watch on Nine & 9Now 🖥️
2:27

"It would be the biggest deal in AFL history by some way." Callum Twomey with exclusive details on the two-year offer with a further NINE-year player option Harley Reid's management have put to West Coast. #9FootyClassified | Watch on Nine & 9Now 🖥️

Footy on Nine

81,625 次观看 • 1 年前

TapNow Creative OS is now live. One AI-native operating system for the entire filmmaking workflow, from idea development and content generation to post-production. Start with an idea and take it all the way to the final cut. Click the link below for more details.
1:33

TapNow Creative OS is now live. One AI-native operating system for the entire filmmaking workflow, from idea development and content generation to post-production. Start with an idea and take it all the way to the final cut. Click the link below for more details.

TapNow

1,036,095 次观看 • 29 天前

It’s Time - Take Action! Earn rewards by getting involved on my Propeller page. There’s everything from online training course to help someone in a crisis, to watching and sharing content. You can earn exclusive reward items & memorabilia like handwritten lyrics, signed lithographs, and guitar pics! Full details at #duffmckagan #MentalHealthAwarenessMonth #songssavelives
0:47

It’s Time - Take Action! Earn rewards by getting involved on my Propeller page. There’s everything from online training course to help someone in a crisis, to watching and sharing content. You can earn exclusive reward items & memorabilia like handwritten lyrics, signed lithographs, and guitar pics! Full details at #duffmckagan #MentalHealthAwarenessMonth #songssavelives

Duff McKagan

56,931 次观看 • 3 年前

Do you want to play! Say hello to our friend! The Ponke Bloky arrives in style. Its been an absolute pleasure working with Ponke team on this one. They have been content pioneers! Watch this space for more details!
0:43

Do you want to play! Say hello to our friend! The Ponke Bloky arrives in style. Its been an absolute pleasure working with Ponke team on this one. They have been content pioneers! Watch this space for more details!

Blokyz

50,816 次观看 • 8 个月前

🚨EXCLUSIVE: President Trump details his administration's pressure campaign on Iran with Trey Yingst , warning of targeted strikes on critical infrastructure—including power plants and bridges—to force a negotiation. "If I didn’t do it the way I’m doing it, they would never make a deal."
1:14

🚨EXCLUSIVE: President Trump details his administration's pressure campaign on Iran with Trey Yingst , warning of targeted strikes on critical infrastructure—including power plants and bridges—to force a negotiation. "If I didn’t do it the way I’m doing it, they would never make a deal."

Special Report

126,439 次观看 • 1 个月前

Check out our content creator events video, packed with all info you need to get started when PC Open Beta launches on Dec 5🥳 Fill in the form to participate: We welcome creators worldwide🌎 with over 1,000 followers to participate in the Creator Incentive Program, featuring a prize pool exceeding $1,000,000. Funding will be allocated regionally and based on specific criteria. Events can be found on Creator Hub for all regions and TikTok for US, UK, FR and JP. More event details: 🚨Join our Creator Discord: creators with over 1,000 followers can join our Discord for more creator events details. Search "Delta Force Content Creator" in Discord or join via #DeltaForce #DeltaForcePCOpenBeta #2DaysToDelta
1:42

Check out our content creator events video, packed with all info you need to get started when PC Open Beta launches on Dec 5🥳 Fill in the form to participate: We welcome creators worldwide🌎 with over 1,000 followers to participate in the Creator Incentive Program, featuring a prize pool exceeding $1,000,000. Funding will be allocated regionally and based on specific criteria. Events can be found on Creator Hub for all regions and TikTok for US, UK, FR and JP. More event details: 🚨Join our Creator Discord: creators with over 1,000 followers can join our Discord for more creator events details. Search "Delta Force Content Creator" in Discord or join via #DeltaForce #DeltaForcePCOpenBeta #2DaysToDelta

Delta Force Game

2,271,191 次观看 • 1 年前

ੈ✩ Hello! We are here to provide you with hourly zayn content from details to videos of the multitalented Zayn Malik! *ੈ✩ This account is meant to be a safe space! Follow us and turn our notifs on. A retweet would mean a lot too !ੈ✩
0:22

ੈ✩ Hello! We are here to provide you with hourly zayn content from details to videos of the multitalented Zayn Malik! *ੈ✩ This account is meant to be a safe space! Follow us and turn our notifs on. A retweet would mean a lot too !ੈ✩

hourly zayn malik 🐆

37,263 次观看 • 3 年前

🚨 I redesigned my site from scratch. A complete rebuild with NextJS over the past few months. ✨Lots of details and custom components in here. The main goal was to focus on content, as well as things like my gear pages easier to update.
0:33

🚨 I redesigned my site from scratch. A complete rebuild with NextJS over the past few months. ✨Lots of details and custom components in here. The main goal was to focus on content, as well as things like my gear pages easier to update.

Stammy

52,066 次观看 • 1 年前