CSS Math Functions
The CSS math functions permit numerical articulations. These CSS math functions can particularly be utilized in maybe unforeseen ways, for example, inside angles and shading the functions and in the mix with CSS custom properties. We'll become very familiar with the language structure for each, view fundamental demos of their usefulness, and specifically use cases.
- We will consider the CSS math functions in detail, which are listed as follows:
- The calc() Function
- The max() Function
- The min() Function
# calc() function:
- It allows us to specifically perform calculations to determine CSS property values, kind of contrary to popular belief. Calculate any mathematical functions.
- This mathematical function has the longest cross-program backing of the four functions we're investigating. It has a wide scope of employment for any time you might want to have the option to do client-side math inside your styles.
- For example, you might need something to take up the vast majority of the viewport stature aside from the tallness of the route.
- Syntax: calc(expression)
height: calc(90%-50px)
| Value | Explanation |
| expression | It required any mathematical operation /expression. The result will show its value of it. Operators can be used are as follows: +, -, *, / . |
Example of calc() function with its code and output:
- calc() function-
code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{ position: absolute;
left: 45px;
width: calc(50% - 50px);
border: 1px solid black;
background-color: lightgray;
padding: 4px;
text-align: center;
}
</style>
</head>
<body>
<h1> The calc() function in CSS </h1>
<p> This is the short paragraph which creates div , <br>
with a 40px gap between both sides of
the div and edge of window: </p>
<div id=”div1”>write something text here..</div>
</body>
</html>
Output for the above calc() code is:
# The max() function:
- Uses the largest value, from a comma-separated list of values, as the property value. Set the max of nos. given.
- Given a work area size of 1280px at 400% zoom, your substance is identical to a gadget at 320px. In any case - versus a cell phone - the direction is still scene. A viewport of this size implies a much-decreased region to peruse and perform activities. Also, sizes that appeared to be proper for a telephone turned into a ton enormous logically when seen in a zoomed-in window.
- Luckily, max() gives us one approach to specifically deal with margins all the more smoothly.
- Syntax: <property> : max(expression 1, expression 2, ...) ;
| Value | Explanation |
| expression1 , expression 2, ..... | From the set of max numbers given it uses the largest value, from a comma-separated list of values. |
Example of max() function with its code and output:
2. max() function-
code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: lightcoral;
height: 80px;
width: max(40%, 250px);
}
</style>
</head>
<body>
<h1>The max() Function in CSS</h1>
<p>Use max() to set the width of #div1 to whichever value is largest, 40% or 250px:</p>
<div id="div1">Write Some text here ...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Output for the above max() code is:
The Screenshot is attached below:
# The min() function:
- This function works in CSS is utilized to extract the mini value from a bunch of comma-separated values.
- Syntax: <property>: min (value1, value2, ....) ;
| Value | Explanation |
| value1, value2, .... | The smallest value is use, from a comma-separated list of values, as the property value. |
Example of min() function with its code and output:
3. min() function-
code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: lightpink;
height: 90px;
width: min(40%, 250px);
}
</style>
</head>
<body>
<h1>The min() Function of CSS</h1>
<p>Use min() to set the width of #div1 to whichever value is smallest, 40% or 250px:</p>
<div id="div1">Some text...</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
Output 3 for the above min() code is:
