正在加载视频...

视频加载失败

加载此视频时出现问题。这可能是由于临时网络问题，或视频可能不可用。

update: now you can use css progress() for adaptive radius, shadow, etc. ↓ same trick, but progress() does the division + clamps for you! 🧑‍🍳 .card__surface { --r: 42px; --g: 24px; border-radius: calc( progress((100vi - 100cqi) / 2, 0px, var(--g)) * var(--r) ); }

jhey ʕ•ᴥ•ʔ

147,617 subscribers

50,916 次观看 • 1 个月前 •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

原始帖子的评论将显示在这里

相关视频

$a little css trick i like ↓ adapt the radius gradually based on available space shrink from --r to 0 within --g 🧑‍🍳 .card__surface { --r: 42px; --g: 24px; border-radius: clamp( 0px, (100vi - 100cqi) / 2 * var(--r) / var(--g), var(--r) ); }$

a little css trick i like ↓ adapt the radius gradually based on available space shrink from --r to 0 within --g 🧑‍🍳 .card__surface { --r: 42px; --g: 24px; border-radius: clamp( 0px, (100vi - 100cqi) / 2 * var(--r) / var(--g), var(--r) ); }

jhey ʕ•ᴥ•ʔ

115,033 次观看 • 1 个月前

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

CSS Tip! 🤙 Use custom properties to work out the nested radius of elements for you 😎 .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } Couldn't resist making an interactive visual! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

795,767 次观看 • 3 年前

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

Must be time for the Q4 nested radius post 📅 Remember, the CSS tip is that you can use custom properties to work out the nested radius of elements for you 😎 .panel { --radius: 28px; --padding: 8px; --nested-radius: calc(var(--radius) - var(--padding); } .content { border-radius: var(--nested-radius); } Here's an interactive visual you can mess with 🤙 CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

533,066 次观看 • 3 年前

it's that time again — the Q2 '25 CSS nested radius post .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } * realistically these will be static values

it's that time again — the Q2 '25 CSS nested radius post .parent { --nested-radius: calc(var(--radius) - var(--padding)); } .nested { border-radius: var(--nested-radius); } * realistically these will be static values

jhey ʕ•ᴥ•ʔ

161,396 次观看 • 1 年前

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

Animated img carousel 🤙 Use CSS trig functions to get radius and layout images as a cylinder 🤓 Use scroll animation to rotate the cylinder 📜 :root { --a: calc((360 / var(--total)) * 1deg); --r: calc((var(--item-width) / sin(var(--a))) * -1); } Explained 👇

jhey ʕ•ᴥ•ʔ

352,417 次观看 • 2 年前

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"

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,088 次观看 • 2 年前

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

CSS only number slider using @property, round(), sin() and scroll-driven animation 🤙 @keyframes progress { to { --val: 100; }} .number-wheel { transform: rotateX(calc(var(--val) * -36deg)); } Watch for the trick reveal 👇

jhey ʕ•ᴥ•ʔ

373,014 次观看 • 2 年前

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

CSS card parallax with pointermove + custom props 🧑‍🍳 <div class=ring style="--i: 2"> .ring { translate: calc(var(--px) * (var(--i) * -2rem)) calc(var(--py) * (var(--i) * 2rem)); } trick: pointer mapping to rotate card in 3D + translate rings 2D for the illusion 🤙 check it 👇

jhey ʕ•ᴥ•ʔ

307,288 次观看 • 11 个月前

This works by using: - normal border-radius - a ::before pseudo-element for the tab - Framer Motion to handle the drag interaction - a tiny distance-to-progress calculation that updates the border radii

This works by using: - normal border-radius - a ::before pseudo-element for the tab - Framer Motion to handle the drag interaction - a tiny distance-to-progress calculation that updates the border radii

Kevin Grajeda

309,845 次观看 • 2 个月前

R G Mugabe International Airport Progress. Ladies' and Gentlemen the project is progressing well and on schedule to be complete by June 2023. 😊😊 #expandingpossibilities #progress #Zimbabwe

R G Mugabe International Airport Progress. Ladies' and Gentlemen the project is progressing well and on schedule to be complete by June 2023. 😊😊 #expandingpossibilities #progress #Zimbabwe

Airports Company Of Zimbabwe 🇿🇼

51,430 次观看 • 3 年前

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; }

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,985 次观看 • 2 年前

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

CSS Trick! 🎃 You can create a wavey border for elements by layering masks 🎭 Used to create this ghost! 👻 Check the video for an exploding view 🫶 .👻 { --size: 20px; mask: radial-gradient(var(--size) at bottom, transparent 97%, #000), radial-gradient(var(--size) at 25% 50%, #000 97%, transparent); mask-repeat: repeat-x; mask-size: calc(2 * var(--size)) 100%, calc(4 * var(--size)) calc(2 * var(--size)); mask-position: 50% calc(100% - var(--size)), calc(50% - var(--size)) 99%; } That code looks kinda scary! 👻 This is one way you could do things. Check the video again or explode in the demo. One mask cuts out circles from the bottom of the element. The other adds overlaid circles back. And that overlap creates the wavey line you want for the ghost 🤙 Using a custom property you can write once and not have to touch again. Update the custom property to update the wave size as shown in the video 🎬 The last piece of the puzzle is animating the mask-position to create that animation @ keyframes flow { to { mask-position: calc(50% + (var(--size) * 4)) calc(100% - var(--size)), calc((50% - var(--size)) + (var(--size) * 4)) 99%; } } If you play with the demo, you may find some Easter eggs! Shake the ghost and double-tap it 😉 Happy Halloween! 🎃 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

181,528 次观看 • 3 年前

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

5 min cursor trails with grid + CSS custom properties 💫 .grid div { opacity: var(--o); transition: opacity 0.8s, rotate 0.4s; &:hover { transition-duration: 0s; rotate: calc(var(--r, 0) * 90deg); opacity: 1; }} trick: dynamic :hover transition

jhey ʕ•ᴥ•ʔ

357,653 次观看 • 1 年前

Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥 .success { --c: green; } aside { background: oklch(from var(--c) calc(l * 0.75) c h / 0.5); color: oklch(from var(--c) calc(l * 1.5) c h); } Magic! ✨

Use CSS relative color syntax to darken/lighten colors for borders, backgrounds, etc. 🔥 .success { --c: green; } aside { background: oklch(from var(--c) calc(l * 0.75) c h / 0.5); color: oklch(from var(--c) calc(l * 1.5) c h); } Magic! ✨

jhey ʕ•ᴥ•ʔ

256,603 次观看 • 2 年前

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶

jhey ʕ•ᴥ•ʔ

91,625 次观看 • 2 年前

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

647,526 次观看 • 3 年前

gettin' back on the demo train 🚂 makin' a little progress with cross-browser "liquid" controls using CSS 🧑‍🍳

gettin' back on the demo train 🚂 makin' a little progress with cross-browser "liquid" controls using CSS 🧑‍🍳

jhey ʕ•ᴥ•ʔ

24,585 次观看 • 1 年前

Progress on `mask-image` support for Tailwind CSS v4.1… 🍿

Progress on `mask-image` support for Tailwind CSS v4.1… 🍿

Adam Wathan

106,365 次观看 • 1 年前

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

185,348 次观看 • 1 年前