Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

5 Kommentare

Profilbild von Aweesha Thavishanka
Aweesha Thavishankavor 1 Jahr

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.🥰)

Profilbild von Noé
Noévor 1 Jahr

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

Profilbild von Nil
Nilvor 1 Jahr

@memdotai mem it

Profilbild von Mem
Memvor 1 Jahr

@jh3yy Saved! Here's the compiled thread:

Profilbild von Deus lo vult
Deus lo vultvor 1 Jahr

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

Ähnliche 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 Aufrufe • vor 4 Monaten

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,588 Aufrufe • vor 8 Monaten

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,692 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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,281 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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

162,954 Aufrufe • vor 11 Monaten

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,449 Aufrufe • vor 6 Monaten

The width of the tape measure
0:57

The width of the tape measure

Massimo

635,147 Aufrufe • vor 1 Jahr

Train the brachialis and build real width
0:23

Train the brachialis and build real width

Muscle Blueprint - Fitness | Health | Abs

37,266 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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

The Reuleaux Triangle, the triangle with a constant width

Interesting AF

514,844 Aufrufe • vor 1 Jahr

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,826 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 3 Jahren

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,982 Aufrufe • vor 2 Jahren

The Width Of Your Palate Determines How You Age
2:59

The Width Of Your Palate Determines How You Age

Oscar Patel

47,867 Aufrufe • vor 1 Monat

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 Aufrufe • vor 9 Monaten