css math function

The CSS math Function has been around for some time now and it's here to stay. The CSS math function uses the calculation to adjust the height, width, font size on a paragraph, and color contrast on your web page, that's right you can as well multiply and subtract your colors.

The math functions include;

The calc() function
The min() function
The max() function
The clamp() function

For now let's look at the three, calc(), min() and max() functions and define function. The functional notation is a type of component value that can invoke special processing, The syntax start's with the name of the function followed by left and right parenthesis and the argument comes in between the parenthesis, in other words, calc().

The calc() Function.

The calc()function performs calculations using math expression to determine the CSS property values, The result is the property value. The operators +-*/ can be used in the calculation. It uses simple calculations to specify the CSS property values and its most important aspect is, it allows us to mix values, operators, and units when making these calculations. It offers two key features;

Using absolute values and percentages together.
Units of mixing sizes.

Let us have a look at the syntax below

 property_name: calc(expression)

According to our definition of functional notation, That's how a math function looks. Let's have a look at one example on how to use the calc() function, have a look at my HTML in the code snippet below.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS CALCULATIONS</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="calculation.css">
    </head>
    <body>
        <div class="box"></div>
        <div class="box2"></div>
    </body>
</html>

The CSS syntax.

    height: calc(100vh - 300px);
    background-color: rgb(203, 250, 133);
    border: 1px solid rgb(203, 250, 133);
    margin-left: 0;
    border-radius: 20px;
    width: min(20rem, 50%, 15vw);
    box-shadow: 5px 5px 15px rgb(102, 168, 3), -5px -5px 15px rgb(162, 247, 36);
}

I have used the calc() function to calculate the height of the

element. I have set my height to 100vh vh is basically (viewport height) same as vw(viewport width), Viewport is the size of the screen that we can view without scrolling.

I have set the height of my element to calc(100vh-300px); My argument in the parenthesis is that I want the height to be 100% of the viewport but subtract 300px from the bottom. The computer will calculate this and assign it to the element as the property value.

Using the calc function to generate colors with the RGB model. The RGB model defines a given color according to its Red, Green, and Blue component. We all know the three primary colors of light are Red, Green, and Blue.

We will use the :root selector to match the

element we are coloring, :root represents the element, except its contrast is higher, in other words, the :root selector is the html element. Accessible-color is a wonderful tool for picking alternative colors, let's say you are working on the color "Blue", it can be used to generate a lot of other complimentary colors.

Let's look at the CSS code.

:root {
        --red: 574;
        --green: 80;
        --blue: 126;

        --accessible-color: calc(
                (var(--red) * 180) +
                (var(--green) * 479) +
                (var(--blue) * 288)
        );
      }
.box2{
    display: inline-block;
    background-color:
    rgb(
      var(--red),
      var(--green),
      var(--blue)
    );
    position: absolute, right, 50px;
    border: 1px solid;
    height: 50px;
    width: 30px;

From my accessible-color, Using var() to insert the value of the CSS variable. I will set my red to 180 plus green at 479 plus blue at 288, I have set my accessible-color and can now specify what I want on my :root selector, The root selector can be adjusted to meet the contrast you want.

min() and max() functions. min() and max() functions are more of a logical function than a math function in CSS. The two help's in controlling the element sizing, maintaining proper spacing, and implementing fluid typography, Using well-supported CSS functions.

min(20rem, 60%, 10vw)

The browser calculates which of these relative units is the smallest and uses that value as the actual value, for example in the code snippet above 10vw will be taken as the smallest and assigned as the property value for the element. 20rem (rem, stands for "root em", meaning the root element's font size), is bigger than 10vw and the same as 60% of the viewport.

max() function calculates the largest value from a list of comma-separated expressions. in my code snippet below, the browser will take the least in this case is 200px which is smaller than 50% of the viewport.

width: min(50%, 200px);

In conclusion, min() and max() are similar and give you the same results, I prefer to use the min() function and would take it any day over the max() function. There is also how to use the calc() inside the min() and max() to have the perfect width and height and smooth typography and maybe by then, I will change my mind.

Resources. web.dev/min-max-clamp

Css Math Functions

Table of contents

No headings in the article.