Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

it's a combo of css pow() + clamp() that makes it possible 👨‍🍳

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

146,470 subscribers

26,291 görüntüleme • 2 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳
0:31

a breakdown of how to cook letters with CSS put a little spin on it 👨‍🍳

jhey ʕ•ᴥ•ʔ

62,676 görüntüleme • 1 yıl önce

Now CSS has JavaScript's Math.pow(), you could generate fluid font scales in CSS for viewport/container sizes 👀 (watch resize) :where(dd) { --min: calc(17 * pow(1.2, var(--lvl, 0))); font-size: clamp(var(--min), var(--fluid), var(--max)); ✨ } dd:nth-of-type(2) { --lvl: 2; }
0:32

Now CSS has JavaScript's Math.pow(), you could generate fluid font scales in CSS for viewport/container sizes 👀 (watch resize) :where(dd) { --min: calc(17 * pow(1.2, var(--lvl, 0))); font-size: clamp(var(--min), var(--fluid), var(--max)); ✨ } dd:nth-of-type(2) { --lvl: 2; }

jhey ʕ•ᴥ•ʔ

128,751 görüntüleme • 2 yıl önce

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳
1:14

built some 3D css books in the past with scroll interaction and demo links might make a css cookbook 👨‍🍳

jhey ʕ•ᴥ•ʔ

59,139 görüntüleme • 7 ay önce

I made an interactive demo showing clamp() in action and comparing it to traditional CSS media queries (link below):
0:35

I made an interactive demo showing clamp() in action and comparing it to traditional CSS media queries (link below):

Kyrylo Silin

32,018 görüntüleme • 2 ay önce

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.
1:08

Learn CSS Flexbox in One minute ( Save It) Animated tutorial makes learning CSS easier.

Alamin

65,653 görüntüleme • 3 yıl önce

Hooks and teleporting - name a better combo... 👨‍🍳 #DreamLeague #dota2
0:34

Hooks and teleporting - name a better combo... 👨‍🍳 #DreamLeague #dota2

ESL Dota2

55,234 görüntüleme • 1 yıl önce

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳
0:26

CSS "will-change" is not always the answer – sometimes it can make things worse reach for "transform: translateZ(0)" and give that a try if you're having issues with motion 👨‍🍳

jhey ʕ•ᴥ•ʔ

54,870 görüntüleme • 11 ay önce

It's that time of year again 🥵 p.s big fan of CSS 🥁
0:26

It's that time of year again 🥵 p.s big fan of CSS 🥁

jhey ʕ•ᴥ•ʔ

90,062 görüntüleme • 1 yıl önce

In Mario Kart Wii, looking back and forth while the POW block is on screen makes the block appear a bit larger for a frame. What's actually happening is that the game adjusts the distance of the POW towards the screen so that it's always the same, as seen at the end.
0:32

In Mario Kart Wii, looking back and forth while the POW block is on screen makes the block appear a bit larger for a frame. What's actually happening is that the game adjusts the distance of the POW towards the screen so that it's always the same, as seen at the end.

B_squo

11,512 görüntüleme • 11 ay önce

Nobody asked for it, but here is a Terry stun combo that wasn't possible on the previous version : #KOFXV_Terry
0:22

Nobody asked for it, but here is a Terry stun combo that wasn't possible on the previous version : #KOFXV_Terry

frionel @ 狼の街

39,387 görüntüleme • 1 yıl önce

4 ways of centering a div - CSS It's easier to learn something when it is animated. 🚀
0:44

4 ways of centering a div - CSS It's easier to learn something when it is animated. 🚀

Ali Reza

96,179 görüntüleme • 3 yıl önce

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡
0:24

when the tool is missing, make it 👨‍🍳 motion path visualizer w/ SVG for accumulated cubic-bezier timed CSS animations ⚡

jhey ʕ•ᴥ•ʔ

213,366 görüntüleme • 8 ay önce

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇
0:33

context-aware css card glow/shine effect 👨‍🍳 the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

840,552 görüntüleme • 7 ay önce

👨‍🍳 Goldbridge makes Yorkshire puddings but it gets progressively more unhinged.
2:00

👨‍🍳 Goldbridge makes Yorkshire puddings but it gets progressively more unhinged.

The United Stand

33,927 görüntüleme • 5 ay önce

CHEF AHN COMPLIMENTING THE DISH MADE BY DOKYEOM (assisted by our boo)! They turned it into culinary class wars scene😂 #도겸 👨‍🍳What do you think about this result? 🐰I think this comes out okay/not bad 👨‍🍳Actually, for pot rice.. 🍊Here it comes, here it comes 👨‍🍳 It's kinda... It's a tricky dish. Actually, there are a few things that depends on different personal tastes, but that aside.. this pot rice is... I think it's a really delicious pot rice!
0:48

CHEF AHN COMPLIMENTING THE DISH MADE BY DOKYEOM (assisted by our boo)! They turned it into culinary class wars scene😂 #도겸 👨‍🍳What do you think about this result? 🐰I think this comes out okay/not bad 👨‍🍳Actually, for pot rice.. 🍊Here it comes, here it comes 👨‍🍳 It's kinda... It's a tricky dish. Actually, there are a few things that depends on different personal tastes, but that aside.. this pot rice is... I think it's a really delicious pot rice!

⁽̨̡ ¨̮ ⁾̧̢🌻

35,758 görüntüleme • 5 ay önce

The invisible steps that make this combo possible 🥹
0:29

The invisible steps that make this combo possible 🥹

Takamura

72,753 görüntüleme • 8 ay önce

It's not the magic that makes it work; it's the way we work that makes it magic. Still enjoying the process🎬
1:25

It's not the magic that makes it work; it's the way we work that makes it magic. Still enjoying the process🎬

Dezny

180,095 görüntüleme • 2 yıl ö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 ʕ•ᴥ•ʔ

173,006 görüntüleme • 2 yıl önce