In this article, we will learn about the CSS Math Functions. CSS Math Functions enable you to express CSS numeric values using mathematical expressions directly in your stylesheets. By using CSS Math Functions, we achieve greater flexibility and ease in creating responsive layouts and styling elements. We can use calc(), max(), and min() math functions to make our work easy.
CSS Math Functions are classified into the following types:
- Basic arithmetic
- Comparison functions
- Trigonometric functions
- Exponential functions
- Sign-related functions
- Stepped value functions
Basic Arithmetic
The basic arithmetic CSS Math function is calc().
calc() Function: It performs all the basic calculations on numeric values.
calc( Expression )
Example: In this example, we will use calc() CSS Math Function.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=">
<title>Calc Function</title>
<style>
.parent {
background-color: rgb(137, 235, 135);
}
.heading {
left: 30px;
width: calc(50% - 100px);
height: 100px;
background-color: #6bcf57;
padding-top: 20px;
text-align: center;
}
h2 {
color: #e9e8e9;
}
</style>
</head>
<body>
<div class="parent">
<div class="heading">
<h2>
Welcome to GEEKSFORGEEKS.
</h2>
</div>
</div>
</body>
</html>
|
Output:
Comparison Functions
This function contains all the comparison function which is used in the CSS Function. It contains max(), min(), and clamp() functions.
max() Function: The max() function in CSS is used to set the maximum of the numbers given. It is used to return the largest value from a set of comma-separated values. It can accept length, frequency, integer, angle, and time types of values.
Syntax:
max(value1, value2...);
Example: In this example, we will use the max() CSS Function.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
justify-content: center;
align-content: center;
color: white;
font-size: auto;
background-color: green;
width: max(10px, max(max(10px, 40px),
max(10px, 150px)));
height: max(10px, max(max(10px, 40px),
max(10px, 100px)));
}
p {
align-self: center;
}
</style>
</head>
<body>
When nested max function is used
<div class="container">
<p>
Welcome to Geeksforgeeks
</p>
</div>
</body>
</html>
|
Output:
min() Function: The min() function in CSS is used to extract the minimum value from a set of comma-separated values. It can take two parameters and a min function can be used inside another min function if the comparison is to be made between multiple values.
Syntax:
min(value1, value2);
min(value1, min(value2, min(value3, value4)));
Example: In this example, we will use the CSS min() Function.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS for the html */
* {
font-family: 'Times New Roman', Times, serif;
font-size: min(20px, 1000px);
font-stretch: narrower;
font-weight: 600;
}
.box {
display: flex;
color: white;
background-color: green;
justify-content: center;
height: min(20vh, min(30vh, min(40vh, 50vh)));
width: min(50vw, min(50vw, min(40vw, 50vw)));
}
h2 {
align-self: center;
}
</style>
</head>
<body>
When nested min function is
used with different units
<div class="box">
<h2>Geeks for geeks</h2>
</div>
</body>
</html>
|
Output:
clamp() Function: The clamp() method is used to clamp the value between an upper and lower bound. The minimum value comes in handy when the preferred value is smaller than the minimum value similarly maximum value comes in handy when the preferred value is more than the maximum value. It calculates the central value of maximum and minimum values.
Syntax:
clamp(value1, value2, value3)
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Setting clamp property of heading */
h1 {
font-size: clamp(2rem, 4vw, 4rem);
color: #075e2d;
}
/* Setting clamp property of box */
.box {
width: clamp(150px, 50%, 400px);
height: 8rem;
background: #5fe863;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome To GFG</h1>
<div class="box"></div>
</div>
</body>
</html>
|
Output:
Trigonometric functions
Trigonometric functions allow you to use trigonometric calculations directly in CSS to define property values. If we want to create complex animations, transformations, or positioning based on trigonometric rules then we can use these functions. It contains sin(), cos(), tan(), asin(), acos(), atan(), and atan2() functions.
sin() Function: The CSS sin() function is used to calculate the sine of an angle. The sine is a trigonometric function whose value ranges between -1 & 1.
Syntax:
/* Angle values */
width: calc(100px * sin(30deg));
width: calc(100px * sin(0.15turn));
width: calc(100px * sin(1.0471967rad));
/* Number values */
width: calc(100px * sin(90));
width: calc(100px * sin(2 * 5));
/* Other values */
width: calc(100px * sin(pi / 3));
width: calc(100px * sin(e / 5));
Example: This example illustrates the Dynamic Width Based on Sine of an Angle.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
height: 100px;
background-color: green;
position: absolute;
top: 50px;
left: 30%;
transform: translateX(-50%);
width: calc(100px * sin(30deg));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
sin() function
</h2>
<div class="box"></div>
</body>
</html>
|
Output:
cos() Function: The CSS cos() function is a mathematical function that calculates the cosine of a given angle.
Syntax:
width: calc(angle);
Example: In this example,we will use cos() function.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 50px;
left: calc(30% + 50px * cos(30deg));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
cos() function
</h2>
<div class="box">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
tan() Function: The CSS tan() function returns the tangent of a specified angle in radians. The value of the tangent will range between −infinity and infinity.
Syntax:
/* Angle values */
width: calc(100px * tan(30deg));
width: calc(100px * tan(0.25turn));
width: calc(100px * tan(0.398163rad));
/* Number values */
width: calc(100px * tan(0.73502));
width: calc(100px * tan(2.732 – 1));
/* Other values */
width: calc(100px * tan(pi / 4));
width: calc(100px * tan(e / 2));
Example: In this example, we will use the tan() function:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 200px;
width: 200px;
background-color: green;
transform: rotate(45deg)
skew(20deg)
scale(1, tan(20deg));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>tan() function</h2>
<div class="container">
</div>
</body>
</html>
|
Output:
asin() Function: The inverse sine of an integer between -1 and 1 is returned by the trigonometric asin() CSS function.
Syntax:
/* Numeric values */
transform: rotate(asin(-0.9));
transform: rotate(asin(1));
/* Other values */
transform: rotate(asin(pi / 2));
transform: rotate(asin(e / 4));
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(asin(pi/8));
}
div.heading-2 {
transform: rotate(asin(e/5));
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
asin() function
</h2>
<div class="heading heading-1">
GeeksforGeeks
</div>
<div class="heading heading-2">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
.png)
- acos() Function: The trigonometric acos() function in the CSS gives the inverse cosine of a value between -1 and 1.
Syntax:
/* Numeric values */
transform: rotate(acos(-0.5));
transform: rotate(acos(4 * 0.256));
/* Other values */
transform: rotate(acos(pi / 2));
transform: rotate(acos(e / 6));
Example: In this example, we will use acos() functions.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(acos(pi/8));
}
div.heading-2 {
transform: rotate(acos(e/5));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>acos() function</h2>
<div class="heading heading-1">
GeeksforGeeks
</div>
<div class="heading heading-2">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
.png)
atan() Function: The trigonometric atan() CSS function returns the inverse tangent of a value between -∞ and +∞.
Syntax:
/* Numeric values */
transform: rotate(atan(-0.9));
transform: rotate(atan(1));
/* Other values */
transform: rotate(atan(pi / 2));
transform: rotate(atan(e / 4));
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(atan(pi/8));
}
div.heading-2 {
transform: rotate(atan(e/5));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
atan() function
</h2>
<div class="heading heading-1">
GeeksforGeeks
</div>
<div class="heading heading-2">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
.png)
atan2() Function: The inverse tangent of two values between -infinity and infinity is returned by the trigonometric atan2() CSS function.
Syntax:
/* Numeric values */
transform: rotate(atan2(5, 1));
/* Dimensional values */
transform: rotate(atan2(12rem, -1.5rem));
/* Percentage values */
transform: rotate(atan2(40%, -50%));
/* Other values */
transform: rotate(atan2(pi, 30));
transform: rotate(atan2(e, 20));
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.heading {
width: 100px;
height: 30px;
color: green;
padding: 30px;
}
div.heading-1 {
transform: rotate(atan2(pi, 45));
}
div.heading-2 {
transform: rotate(atan2(e, 30));
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
atan2() function
</h2>
<div class="heading heading-1">
GeeksforGeeks
</div>
<div class="heading heading-2">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
.png)
Exponential functions:
| pow() Function |
width: calc(10px * pow(5,2)); |
It calculates the base raised to the power of the number. |
| sqrt() Function |
width: calc(100px * sqrt(9)); |
It calculates the square root of a number |
| hypot() Function |
width: hypot(3em, 4em); |
It calculates the square root of the sum of the squares of its arguments. |
| log() Function |
width: calc(100px * log(8, 2)); /* 300px */ |
It calculates the logarithm of a number |
| exp() Function |
width: calc(100px * exp(0)); /* 100px * 1 = 100px */ |
It is used to calculate e raised to the power of a number. |
Sign-related functions:
| abs() Function |
width: abs(20% – 100px); |
It calculates the absolute value of the number |
| sign() Function |
top: sign(20vh – 100px); |
It calculates the sign of the number |
Stepped value functions:
| round() Function |
property: round(<rounding-strategy>, valueToRound, roundingInterval); |
It calculates the rounded number based on the rounding strategy. |
| mod() Function |
mod(dividend, divisor) |
It calculates the modulus by dividing one number by another. |
| rem() Function |
rem(dividend, divisor) |
It calculates the remainder by dividing one number with another. |
Share your thoughts in the comments
Please Login to comment...