Loading video...

Video Failed to Load

Go Home

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 views • 1 year ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

5 Comments

Aweesha Thavishanka's profile picture
Aweesha Thavishanka1 year ago

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é's profile picture
Noé1 year ago

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

Nil's profile picture
Nil1 year ago

@memdotai mem it

Mem's profile picture
Mem1 year ago

@jh3yy Saved! Here's the compiled thread:

Deus lo vult's profile picture
Deus lo vult1 year ago

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

Related Videos

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 views • 5 months ago

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 views • 8 months ago

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 views • 2 years ago

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 views • 1 year ago

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 views • 1 year ago

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 views • 2 years ago

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 views • 1 year ago

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 views • 7 months ago

The width of the tape measure
0:57

The width of the tape measure

Massimo

635,147 views • 1 year ago

Train the brachialis and build real width
0:23

Train the brachialis and build real width

Muscle Blueprint - Fitness | Health | Abs

37,266 views • 3 months ago

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 views • 8 months ago

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 views • 1 year ago

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 views • 2 years ago

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

The Reuleaux Triangle, the triangle with a constant width

Interesting AF

514,847 views • 1 year ago

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 views • 6 months ago

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 views • 3 years ago

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 views • 2 years ago

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 views • 10 months ago