diff --git a/index.html b/index.html index 883de72e4..babf40352 100644 --- a/index.html +++ b/index.html @@ -63,6 +63,7 @@

other

+ Calc() Custom variables
@@ -258,6 +259,52 @@ +
+

Calc()other

+

The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.

+

HTML

<div class="box-example"></div>
+
+

CSS

.box-example {
+  width: calc(100% - 60px);
+}
+
+

Demo

+
+
Box Example
+
+ +

Explanation

+
    +
  1. It allows addition, subtraction, multiplication and division.
    2. +
  2. Can use different units (pixel and percent together, for example) for each value in your expression.
    3. +
  3. It is permitted to nest calc() functions.
    4. +
  4. It can be used in any property that <length>, <frequency>, <angle>, <time>, <number>, <color>, or <integer> is allowed, like width, height, font-size, top, left, etc.
    5. +
+

Browser support

+
+
+ 94.9% +
+
+

✅ No caveats.

+ + + +

Circlevisual

Creates a circle shape with pure CSS.

diff --git a/snippets/calc.md b/snippets/calc.md new file mode 100644 index 000000000..27b8b040a --- /dev/null +++ b/snippets/calc.md @@ -0,0 +1,50 @@ +### Calc() + +The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression. + +#### HTML + +```html +
+``` + +#### CSS + +```css +.box-example { + width: calc(100% - 60px); +} +``` + +#### Demo + +
+
Box Example
+
+ + + +#### Explanation + +1. It allows addition, subtraction, multiplication and division. +2. Can use different units (pixel and percent together, for example) for each value in your expression. +3. It is permitted to nest calc() functions. +4. It can be used in any property that ``, ``, ``, `