Skip to main content

Command Palette

Search for a command to run...

CSS Functions

Published
CSS Functions
A

Hi there πŸ‘‹, I am Anil Verma I am a passionate Full Stack Web Developer who is fascinated by complex engineering problems.

clamp()

clamps a value between an upper and lower bound
font-size: clamp(min, range, max); font-size: clamp(1rem, 1vw + 1rem, 2rem);

Means-
Minimmum font size will be 1 rem
Max Font size will be 2 rem
Range β€”β€Š1vw + 1rem
if Range value gets calculated less than min value(here 1rem) then 1 rem will be set as font size
if Range value gets calculated more than max value(here 2rem) then 2 rem will be set as font size
if Range value gets calculated between max value(here 2rem) and min value (here 1rem) then in that case whatever range value is calculated will be applied.

Max()
width: max(40%,300px)
it means min-width:300px and width:40%

Max()
width: min(40%,300px)
it means max-width:300px and width:40%

Happy learning πŸ‘πŸ‘