Web Analytics
☕ Coffee 𝕏 Follow
0%

CSS Functions

Advanced ~10 min read

What are CSS Functions?

CSS functions perform calculations and transformations. They make your CSS dynamic and responsive!

calc() Function

calc() performs mathematical calculations. Mix units like px, %, rem, and more!

HTML
CSS
JS

min() and max()

min() returns the smallest value, max() returns the largest. Perfect for responsive sizing!

HTML
CSS
JS

clamp() Function

clamp(min, preferred, max) creates responsive values with minimum and maximum bounds. Game-changer for fluid typography!

HTML
CSS
JS

Color Functions

rgb(), rgba(), hsl(), hsla() create colors programmatically.

HTML
CSS
JS

Transform Functions

Functions like rotate(), scale(), translate() are used with the transform property.

HTML
CSS
JS

Practical Example: Responsive Card

Combine multiple functions for a fully responsive component.

HTML
CSS
JS
Pro Tip: Use clamp() for fluid typography instead of media queries! It creates smooth, responsive text that scales perfectly across all screen sizes.

Summary

  • calc() - Mathematical calculations
  • min() - Smallest value from list
  • max() - Largest value from list
  • clamp(min, preferred, max) - Bounded responsive values
  • rgb(), hsl() - Color functions
  • Transform functions: rotate(), scale(), translate()

Quick Quiz

Which function creates responsive values with min and max bounds?

A
calc()
B
clamp()
C
min()
D
max()
Previous CSS Variables
Next Filters & Blend Modes