正在加载视频...

视频加载失败

返回首页

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); }}

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,805 subscribers

64,736 次观看 • 1 年前 •via X (Twitter)

科学技术教育
LIVE

Anya Rossi• Live Now

Private livecam show

5 条评论

Aweesha Thavishanka 的头像
Aweesha Thavishanka1 年前

Below I mentioned Tailwindcss Code for that. 💫 <div class="transition-all duration-300 ease-in-out max-w-[640px] w-[calc(100vw-2rem)]"> <!-- Content here --> </div> (If have any issue please inform that.🥰)

Noé 的头像
Noé1 年前

How are you making these controls in the top right corner? They look so nice.

Nil 的头像
Nil1 年前

@memdotai mem it

Mem 的头像
Mem1 年前

@jh3yy Saved! Here's the compiled thread:

Deus lo vult 的头像
Deus lo vult1 年前

Cuando algún vídeo sobre como hacer estás cositas 🧐🧐

相关视频

iOS-style morphing context menu w/ css transitions 👨‍🍳 [popover] api + anchor positioning + transition-behavior: allow-discrete
0:31

iOS-style morphing context menu w/ css transitions 👨‍🍳 [popover] api + anchor positioning + transition-behavior: allow-discrete

jhey ʕ•ᴥ•ʔ

30,546 次观看 • 5 个月前

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 次观看 • 8 个月前

Update... All you need is this for a CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } Create an anchor on hover, makes sense! 🤦‍♂️ h/t @yassi_lah for the push 🤙
0:27

Update... All you need is this for a CSS-only magnetic link effect 🤯 li:has(a:is(:hover, :focus-visible)) {anchor-name: --a; } ul::before { left: anchor(--a left); width: anchor-size(--a width); } Create an anchor on hover, makes sense! 🤦‍♂️ h/t @yassi_lah for the push 🤙

jhey ʕ•ᴥ•ʔ

194,752 次观看 • 2 年前

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,127 次观看 • 1 年前

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! 🫶
0:28

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! 🫶

jhey ʕ•ᴥ•ʔ

216,460 次观看 • 1 年前

The different driving techniques used when approaching this height/width restrictor... 🚘
0:25

The different driving techniques used when approaching this height/width restrictor... 🚘

HOW THINGS WORK

14,477,853 次观看 • 2 年前

Variable width stroke: For those of you who need control over the width of every single point along a stroke
0:31

Variable width stroke: For those of you who need control over the width of every single point along a stroke

Figma

163,102 次观看 • 1 年前

Transparent standing table! 4mm nozzle, 6mm layer width and 2mm layer height!
0:59

Transparent standing table! 4mm nozzle, 6mm layer width and 2mm layer height!

Simone Fontana

18,463 次观看 • 7 个月前

The width of the tape measure
0:57

The width of the tape measure

Massimo

635,147 次观看 • 1 年前

Train the brachialis and build real width
0:23

Train the brachialis and build real width

Muscle Blueprint - Fitness | Health | Abs

37,266 次观看 • 3 个月前

Putting down some beautiful layers! 4mm nozzle, 2mm layer height, 5mm line width.
0:59

Putting down some beautiful layers! 4mm nozzle, 2mm layer height, 5mm line width.

Simone Fontana

22,873 次观看 • 8 个月前

Tyrannosaurus with closed mouth 1:35 scale size Length 37.5cm Height 13.4cm Width 13.6cm #trex #공룡 #티라노사우루스 #dinosaur #Tyrannosaurus #3dprint #3d프린터
0:31

Tyrannosaurus with closed mouth 1:35 scale size Length 37.5cm Height 13.4cm Width 13.6cm #trex #공룡 #티라노사우루스 #dinosaur #Tyrannosaurus #3dprint #3d프린터

Vitamin-Imagination

17,172 次观看 • 1 年前

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 年前

The Reuleaux Triangle, the triangle with a constant width
0:57

The Reuleaux Triangle, the triangle with a constant width

Interesting AF

514,847 次观看 • 1 年前

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)
0:39

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Adam Argyle

92,884 次观看 • 6 个月前

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇
0:55

CSS Tip! ⚡️ Use :has() to style siblings in both directions ↔️ li:has(+ li :checked) { width: var(--not-feature-width); } Was asked how close you could get to "that" Stripe gallery effect 🤔 So gave it a go on the flight back from Prague! ✈️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

215,359 次观看 • 3 年前

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"
0:45

3D CSS image slider works well on device 🤙 li { --item-width: clamp(120px, 20vmin, 12rem); --radius: calc( (var(--item-width) / sin(var(--inner-angle))) * -1 ); } It's cool how you can use a clamped value with "calc"

jhey ʕ•ᴥ•ʔ

172,989 次观看 • 2 年前

Iraola is getting a lot of praise deservedly I really like his commitment to double width in his Bournemouth side Finding solutions through dualities, affordances around the block and out to in progressions Rather than using width holders to open spaces between the lines
1:28

Iraola is getting a lot of praise deservedly I really like his commitment to double width in his Bournemouth side Finding solutions through dualities, affordances around the block and out to in progressions Rather than using width holders to open spaces between the lines

JOGO FUNCIONAL

77,805 次观看 • 10 个月前