CSS - Math Functions

Previous
Quiz
Next

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 */
}

Table of Contents

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(), and clamp() 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(), and tan(), 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>

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>

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>

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.
max() Determines the maximum value from a given list of values.
clamp() Calculates the central of a minimum, central, and maximum values.

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.

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.
cos() Calculates the trigonometric cosine of a number
tan() Calculates the trigonometric tangent of a number.
asin() Calculates the trigonometric inverse sine of a number.
acos() Calculates the trigonometric inverse cosine of a number.
atan() Calculates the trigonometric inverse tangent of a number.
atan2() Calculates the trigonometric inverse tangent of two-numbers in a plane.
Print Page
Previous
Next
Advertisements