正在加载视频...

视频加载失败

返回首页

CSS Clamp function 🌟 -> clamp() is a function in CSS that provides a concise way for combining both the min() and max() functions. ⚠ Note: This can be achieved by this also - min(100px, max(50%, 200px))

Star_Knight12's profile picture

Prasenjit

20,239 subscribers

78,724 次观看 • 1 年前 •via X (Twitter)

科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

0 条评论

暂无评论

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

相关视频

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().
0:11

CSS shape() is now Baseline Newly Available → The shape() function allows you to create responsive, complex paths for layouts and animations using standard CSS units like %, rem, and calc().

Chrome for Developers

24,566 次观看 • 2 个月前

📌 Forget breakpoints! Use CSS clamp to size your text based on the viewport width. Sandbox + details below 👇
0:12

📌 Forget breakpoints! Use CSS clamp to size your text based on the viewport width. Sandbox + details below 👇

andrej

211,102 次观看 • 3 年前

A simple visualization of Fluid efficiency Like a server, the same function instance can deal with multiple in-flight requests. Great for '↻ Thinking' LLMs. This is not a 'demo'. It's backed by real Fluid functions that report back their UUIDs (at 75% less cost.)
0:18

A simple visualization of Fluid efficiency Like a server, the same function instance can deal with multiple in-flight requests. Great for '↻ Thinking' LLMs. This is not a 'demo'. It's backed by real Fluid functions that report back their UUIDs (at 75% less cost.)

Guillermo Rauch

36,096 次观看 • 1 年前

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

163,964 次观看 • 28 天前

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥
0:12

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

Pasquale Vitiello

35,479 次观看 • 1 年前

Learn CSS transition timing functions with this tutorial 🚀 🧑‍💻
0:10

Learn CSS transition timing functions with this tutorial 🚀 🧑‍💻

David Mráz

39,832 次观看 • 2 年前

i'm late to this but CSS Minecraft (by Benjamin Aster) is the coolest CSS hack i've ever seen and it's not close. what a feat. there's no javascript on this page!!
0:16

i'm late to this but CSS Minecraft (by Benjamin Aster) is the coolest CSS hack i've ever seen and it's not close. what a feat. there's no javascript on this page!!

nolen

277,424 次观看 • 1 年前

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:
0:13

You can finally apply transitions on CSS display property. 👀 Combining both transition behavior and starting style, Here's how it works:

Ali

12,980 次观看 • 26 天前

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.
0:17

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.

一丝

16,276 次观看 • 1 个月前

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗
0:17

✍️ New Article: Better fluid sizing with round() I wrote about how CSS round() enhances the values you get from clamp() in sizing, typography, and spacing. Why it matters, and how to use it. 🔗

Ahmad Shadeed

29,302 次观看 • 18 天前

The glue is all you needed and a clamp
0:17

The glue is all you needed and a clamp

Milky

10,731,090 次观看 • 7 个月前

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,341 次观看 • 3 年前

jimmy: “thanks for being here!” max: “i lovee being here.” jimmy: “max verstappen, like verstopping at the store, verstopping to get coffee, ya know?” max: “ver-stopping this interview 😇” the vibe i bring to the function..
0:11

jimmy: “thanks for being here!” max: “i lovee being here.” jimmy: “max verstappen, like verstopping at the store, verstopping to get coffee, ya know?” max: “ver-stopping this interview 😇” the vibe i bring to the function..

nini

865,389 次观看 • 27 天前

Do you think this is better than a clamp? Give your opinion.
0:14

Do you think this is better than a clamp? Give your opinion.

Ayu D. Palupi

452,877 次观看 • 10 个月前

I have some bad news for you.🙃 Starting from One UI 6.1.1, Samsung has canceled the function of recording GIF dynamic pictures in Smart Multi-Screenshot. Such a practical function was canceled by Samsung. I can't understand it! Before: We can also use the gif function After: The gif recording function has been canceled
0:14

I have some bad news for you.🙃 Starting from One UI 6.1.1, Samsung has canceled the function of recording GIF dynamic pictures in Smart Multi-Screenshot. Such a practical function was canceled by Samsung. I can't understand it! Before: We can also use the gif function After: The gif recording function has been canceled

PhoneArt

226,056 次观看 • 1 年前

Not a perfect example, but an opportunity for me to note that James Harden, in Year 16, is 2nd in the NBA in blow-by rate this year among high volume drivers (min. 500) lol
0:11

Not a perfect example, but an opportunity for me to note that James Harden, in Year 16, is 2nd in the NBA in blow-by rate this year among high volume drivers (min. 500) lol

Nekias (Nuh-KY-us) Duncan

11,178 次观看 • 1 年前

Fix my golf swing … please share this and also please give me your best insult or advice NOTE- Both Max and I had about 5 tequilla’s before the swings - he’s a scratch and i’m a 12
0:11

Fix my golf swing … please share this and also please give me your best insult or advice NOTE- Both Max and I had about 5 tequilla’s before the swings - he’s a scratch and i’m a 12

Howard Lindzon

20,444 次观看 • 1 年前

Even though this curve is sin(pi-theta), it looks exactly like the function sin(theta)…this is not a coincidence at all. The way the sine curve looks is exactly the same way this curve looks, and therefore we can conclude that sin(pi-theta)=sin(theta) (al
0:12

Even though this curve is sin(pi-theta), it looks exactly like the function sin(theta)…this is not a coincidence at all. The way the sine curve looks is exactly the same way this curve looks, and therefore we can conclude that sin(pi-theta)=sin(theta) (al

Know-How

19,352 次观看 • 1 年前