Loading video...

Video Failed to Load

Go Home

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 views โ€ข 1 year ago โ€ขvia X (Twitter)

Science & Technology
LIVE

Anya Rossiโ€ข Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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 views โ€ข 2 months ago

๐Ÿ“Œ 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 views โ€ข 3 years ago

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 views โ€ข 1 year ago

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

165,738 views โ€ข 1 month ago

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 views โ€ข 1 year ago

Learn CSS transition timing functions with this tutorial ๐Ÿš€ ๐Ÿง‘โ€๐Ÿ’ป
0:10

Learn CSS transition timing functions with this tutorial ๐Ÿš€ ๐Ÿง‘โ€๐Ÿ’ป

David Mrรกz

39,832 views โ€ข 2 years ago

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 views โ€ข 1 year ago

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 views โ€ข 28 days ago

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 views โ€ข 1 month ago

โœ๏ธ 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,753 views โ€ข 20 days ago

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 views โ€ข 3 years ago

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

The glue is all you needed and a clamp

Milky

10,731,090 views โ€ข 7 months ago

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

866,089 views โ€ข 29 days ago

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 views โ€ข 10 months ago

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 views โ€ข 1 year ago

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 views โ€ข 1 year ago

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 views โ€ข 1 year ago

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 views โ€ข 1 year ago