Загрузка видео...

Не удалось загрузить видео

На главную

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,462 просмотров • 7 месяцев назад

The width of the tape measure
0:57

The width of the tape measure

Massimo

635,147 просмотров • 1 год назад

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 месяцев назад

Train the brachialis and build real width
0:23

Train the brachialis and build real width

Muscle Blueprint - Fitness | Health | Abs

37,266 просмотров • 3 месяцев назад

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 лет назад

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

The Width Of Your Palate Determines How You Age

Oscar Patel

47,867 просмотров • 1 месяц назад