Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiEğitim
LIVE

Anya Rossi• Live Now

Private livecam show

5 Yorum

Aweesha Thavishanka profil fotoğrafı
Aweesha Thavishanka1 yıl önce

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é profil fotoğrafı
Noé1 yıl önce

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

Nil profil fotoğrafı
Nil1 yıl önce

@memdotai mem it

Mem profil fotoğrafı
Mem1 yıl önce

@jh3yy Saved! Here's the compiled thread:

Deus lo vult profil fotoğrafı
Deus lo vult1 yıl önce

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

Benzer Videolar

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 görüntüleme • 4 ay önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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,462 görüntüleme • 7 ay önce

The width of the tape measure
0:57

The width of the tape measure

Massimo

635,147 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

Train the brachialis and build real width
0:23

Train the brachialis and build real width

Muscle Blueprint - Fitness | Health | Abs

37,266 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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

The Reuleaux Triangle, the triangle with a constant width

Interesting AF

514,847 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 2 yıl önce

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

The Width Of Your Palate Determines How You Age

Oscar Patel

47,867 görüntüleme • 1 ay önce