CSS math functions allow you to perform mathematical calculations directly in your CSS stylesheets. These functions can be used to manipulate values such as lengths, angles, colors, and more.
div{width:calc(100% - 40px);/* 100% width minus 40px for padding */width:max(200px, 50%);/* Set width to the maximum value between
200px and 50% of the viewport width */}</pre>
Table of Contents
- Types of Mathematical Functions in CSS
- Math Functions
- Basic Arithmetic Functions
- Comparison Functions
- Stepped Value Functions
- Trigonometric Functions
Types of Mathematical Functions in CSS
There are several types of math functions that can be used in CSS. They include:
- Basic Arithmetic Functions This includes the
calc()function for performing calculations on numerical values. - Comparison Functions This includes functions like
min(),max(), andclamp()for comparing variables. - Stepped Value Functions This includes the
round()function for calculating a rounded number based on a rounding strategy. - Trigonometric Functions These functions, such as
sin(),cos(), andtan(), introduce mathematical functions like sine, cosine, and tangent into stylesheets.
The calc Function
The calc() function is a basic arithmetic function in CSS that allows you to perform calculations on numerical values. It can be used to dynamically modify property values by carrying out mathematical operations like addition, subtraction, multiplication, and division.
Example
Here's an example that demonstrates the usage of the calc() function:
<!DOCTYPE html><html lang="en"><head><style>.container { width: 80%; margin: 0 auto; border: 1px solid #000; padding: 20px; }.box { /* 100% width minus 40px for padding */ width: calc(100% - 40px);/* 100% of viewport height minus 20px for padding */ height: calc(100% - 20px);background-color: lightblue; padding: 20px; box-sizing: border-box; } </style></head><body><div class="container"><div class="box"> This box uses the CSS calc() function to dynamically calculate its width and height. </div></div></body></html></pre>The max Function
The max() function is a comparison function in CSS that allows you to determine the maximum value from a given list of values. It can be used to compare variables and apply conditional styling based on the maximum value.
Example
Here's an example that demonstrates the usage of the
max()function:<!DOCTYPE html><html lang="en"><head><style>.container { width: 80%; margin: 0 auto; border: 1px solid #000; padding: 20px; }.box { /* Set the width to the maximum value between 200px and 50% of the viewport width */ width: max(200px, 50%); background-color: lightblue; padding: 20px; box-sizing: border-box; } </style></head><body><div class="container"><div class="box"> This box uses the CSS max() function to set its width to the maximum value between 200px and 50% of the viewport width. </div></div></body></html></pre>The min Function
The min() function is a comparison function in CSS that allows you to determine the minimum value from a given list of values. It can be used to compare variables and apply conditional styling based on the minimum value.
Example
Here's an example that demonstrates the usage of the
min()function:<!DOCTYPE html><html lang="en"><head><style>.container { width: 80%; margin: 0 auto; border: 1px solid #000; padding: 20px; }.box { /* Set the width to the minimum value between 200px and 50% of the viewport width */ width: min(200px, 50%); background-color: lightblue; padding: 20px; box-sizing: border-box; } </style></head><body><div class="container"><div class="box"> This box uses the CSS min() function to set its width to the minimum value between 200px and 50% of the viewport width. </div></div></body></html></pre>Comparison Functions
The assessment of values is made easier by CSS comparison functions, which allows conditional styling based on comparisons within stylesheets.
Following table lists comparison functions:
Function Description Example min() Determines the minimum value from a given set of values. Try It max() Determines the maximum value from a given list of values. Try It clamp() Calculates the central of a minimum, central, and maximum values. Try It Stepped Value Functions
Stepped value functions provide granular control in stylesheets by enabling exact changes and discrete jumps in property values in CSS.
Following table lists stepped value functions:
Function Description Example round() Calculates a rounded number based on a rounding strategy. Try It Trigonometric Functions
CSS trigonometric functions allow for more complex design alterations by introducing mathematical functions like sine, cosine, and tangent into stylesheets.
Following table lists trigonometric functions:
Function Description Example sin() Calculates the trigonometric sine of a number. Try It cos() Calculates the trigonometric cosine of a number Try It tan() Calculates the trigonometric tangent of a number. Try It asin() Calculates the trigonometric inverse sine of a number. Try It acos() Calculates the trigonometric inverse cosine of a number. Try It atan() Calculates the trigonometric inverse tangent of a number. Try It atan2() Calculates the trigonometric inverse tangent of two-numbers in a plane. Try It
Leave a Reply