diff --git a/index.html b/index.html index 852f85506..797778f38 100644 --- a/index.html +++ b/index.html @@ -71,6 +71,7 @@

other

+ Calc() Counter Custom variables
@@ -301,6 +302,55 @@ +
+

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 {
+  height: 280px;
+  background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
+  background-position: calc(100% - 20px) calc(100% - 20px);
+}
+
+

Demo

+

If you want to align a background-image from right and bottom wasn't possible with just straight length values. So now it's possible using calc():

+
+
Background-image in the right/bottom
+
+ +

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..7575afa5a --- /dev/null +++ b/snippets/calc.md @@ -0,0 +1,55 @@ +### 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 { + height: 280px; + background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat; + background-position: calc(100% - 20px) calc(100% - 20px); +} +``` + +#### Demo + +If you want to align a background-image from right and bottom wasn't possible with just straight length values. +So now it's possible using calc(): + +
+
Background-image in the right/bottom
+
+ + + +#### 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 ``, ``, ``, `