Functions

Use Cases

• Web.dev Examples for min(), max() and clamp()
• MDN List of all CSS Functions

calc()

• Mixing Units, ex:

:root {
    --header: 3rem;
    --footer: 40px;
    --main: calc(100vh - calc(var(--header) + var(--footer)));
}

min() & max()

• Allows you to set different types of behaviors based on elements current size.

#iconHolder {
  width: min(150px, 100%);
  height: min(150px, 100%);
  box-sizing: border-box;
  border: 6px solid blue;
}

clamp()

• Great way to make elements fluid and responsive. clamp() takes 3 values:

  1. the smallest value (320px)
  2. the ideal value (80vw)
  3. the largest value (60rem)

conic-gradient()

• Cool Stuff

background: conic-gradient( 
    red 6deg, orange 6deg 18deg, yellow 18deg 45deg, 
    green 45deg 110deg, blue 110deg 200deg, purple 200deg);

cross-fade