mod

Description
Syntax
Examples
Links

Description

The mod function for CSS contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.

If the A value and the B step are on opposite sides of zero: mod() (short for “modulus”) continues to choose the integer multiple of B that puts the value between zero and B.

Syntax

CSS

mod()

Values

<mod()> =
    mod(
        <calc-sum>,
        <calc-sum>
    )

<calc-sum> =
    <calc-product>
    [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
    <calc-value>
    [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
    <number> |
    <dimension> |
    <percentage> |
    <calc-constant> |
    ( <calc-sum> )

<number>

An integer or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits. The first character may be preceded by a sign (- or +). The last character may be succeeded by an exponent (e or E) and an integer.

<dimension>

A number with a unit.

<percentage>

Specifies the percentage using a number followed by a percent sign (%).

<calc-constant> =
    e |
    pi |
    infinity |
    -infinity |
    NaN

The base of the natural logarithm, approximately equal to 2.7182818284590452354.

pi

The ratio of a circle's circumference to its diameter, approximately equal to 3.1415926535897932.

infinity

Positive infinity.

-infinity

Negative infinity.

NaN

Not a number.

Multiplication.

Division.

Addition.

Subtraction.

Examples

1 · modulus

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: mod(50%, 40%);
            --myvar3: mod(50%, 30%);
            --myvar4: mod(50%, 20%);
            --myvar5: mod(50%, 10%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>modulus</div>
    <div>modulus</div>
    <div>modulus</div>
    <div>modulus</div>
    <div>modulus</div>
</body>
</html>

2 · +

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: mod(50% + 10px, 40%);
            --myvar3: mod(50% + 10px, 30%);
            --myvar4: mod(50% + 10px, 20%);
            --myvar5: mod(50% + 10px, 10%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>+</div>
    <div>+</div>
    <div>+</div>
    <div>+</div>
    <div>+</div>
</body>
</html>

3 · -

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: mod(50% - 10px, 40%);
            --myvar3: mod(50% - 10px, 30%);
            --myvar4: mod(50% - 10px, 20%);
            --myvar5: mod(50% - 10px, 10%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
    <div>-</div>
</body>
</html>

4 · :root

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: mod(50% * 10, 40%);
            --myvar3: mod(50% * 10, 30%);
            --myvar4: mod(50% * 10, 20%);
            --myvar5: mod(50% * 10, 10%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>*</div>
    <div>*</div>
    <div>*</div>
    <div>*</div>
    <div>*</div>
</body>
</html>

5 · /

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
            --myvar2: mod(50% / 10, 40%);
            --myvar3: mod(50% / 10, 30%);
            --myvar4: mod(50% / 10, 20%);
            --myvar5: mod(50% / 10, 10%);
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <div>/</div>
    <div>/</div>
    <div>/</div>
    <div>/</div>
    <div>/</div>
</body>
</html>

6 · JS

<!doctype html>
<html>
<head>
    <style>
        :root
        {
            --myvar1: 50%;
        }
        div
        {
            background-image: linear-gradient(135deg, white, lightgray);
            height: 100px;
        }
        div:nth-of-type(1)
        {
            width: var(--myvar1);
        }
        div:nth-of-type(2)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar2);
        }
        div:nth-of-type(3)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar3);
        }
        div:nth-of-type(4)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar4);
        }
        div:nth-of-type(5)
        {
            background-image: linear-gradient(135deg, white, yellow);
            width: var(--myvar5);
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button value=" ">modulus</button>
    <button value=" + 10px">+</button>
    <button value=" - 10px">-</button>
    <button value=" * 10">*</button>
    <button value=" / 10">/</button>
    <div>mod</div>
    <div>mod</div>
    <div>mod</div>
    <div>mod</div>
    <div>mod</div>
    <script>
        function myfunction(myparameter)
        {
            const mytarget = myparameter.target;
            const myproperty = mytarget.value || mytarget.innerHTML;
            const mystyle = document.querySelector(":root").style;
            mystyle.setProperty('--myvar2', 'mod(50%' + myproperty + ', 40%)');
            mystyle.setProperty('--myvar3', 'mod(50%' + myproperty + ', 30%)');
            mystyle.setProperty('--myvar4', 'mod(50%' + myproperty + ', 20%)');
            mystyle.setProperty('--myvar5', 'mod(50%' + myproperty + ', 10%)');
        }
        for(const mybutton of document.querySelectorAll("button"))
        {
            mybutton.addEventListener("mouseover", myfunction);
        }
    </script>
</body>
</html>