andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #90 from jbwestphal/master

Browse Source 
[FEATURE] Add calc() function
This commit is contained in:
Angelos Chalaris
2018-10-27 11:36:29 +03:00
committed by GitHub
parent 4d6d6a33ad 5b9c9b4ef8
commit 50c995ea9f
2 changed files with 105 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -71,6 +71,7 @@
</section>
<section data-type="other" class="sidebar__section">
<h4 class="sidebar__section-heading">other</h4>
<a class="sidebar__link" href="#calc"><span>Calc()</span></a>
<a class="sidebar__link" href="#counter"><span>Counter</span></a>
<a class="sidebar__link" href="#custom-variables"><span>Custom variables</span></a>
</section>
@ -301,6 +302,55 @@
<!-- tags: layout -->
</div>
<div class="snippet">
<h3 id="calc"><span>Calc()</span><span class="tags__tag snippet__tag" data-type="other"><i data-feather="tag"></i>other</span></h3>
<p>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.</p>
<h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="box-example"&gt;&lt;/div&gt;
</code></pre>
<h4 data-type="CSS">CSS</h4><pre><code class="lang-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);
}
</code></pre>
<h4>Demo</h4>
<p>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():</p>
<div class="snippet-demo">
<div class="snippet-demo__calc">Background-image in the right/bottom</div>
</div>
<style>
.snippet-demo__calc {
height: 280px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
background-position: calc(100% - 20px) calc(100% - 40px);
}
</style>
<h4>Explanation</h4>
<ol>
<li>It allows addition, subtraction, multiplication and division.</li>
<li>Can use different units (pixel and percent together, for example) for each value in your expression.</li>
<li>It is permitted to nest calc() functions.</li>
<li>It can be used in any property that <code>&lt;length&gt;</code>, <code>&lt;frequency&gt;</code>, <code>&lt;angle&gt;</code>, <code>&lt;time&gt;</code>, <code>&lt;number&gt;</code>, <code>&lt;color&gt;</code>, or <code>&lt;integer&gt;</code> is allowed, like width, height, font-size, top, left, etc.</li>
</ol>
<h4>Browser support</h4>
<div>
<div class="snippet__browser-support">
94.9%
</div>
</div>
<p><span class="snippet__support-note">✅ No caveats.</span></p>
<ul>
<li>
<a href="https://caniuse.com/#feat=calc" target="_blank">https://caniuse.com/#feat=calc</a>
</li>
</ul>
<!-- tags: other -->
</div>
<div class="snippet">
<h3 id="circle"><span>Circle</span><span class="tags__tag snippet__tag" data-type="visual"><i data-feather="eye"></i>visual</span></h3>
<p>Creates a circle shape with pure CSS.</p>

55
snippets/calc.md Normal file
View File

@ -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
<div class="box-example"></div>
```
#### 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():
<div class="snippet-demo">
<div class="snippet-demo__calc">Background-image in the right/bottom</div>
</div>
<style>
.snippet-demo__calc {
height: 280px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #222 url('https://image.ibb.co/fUL9nS/wolf.png') no-repeat;
background-position: calc(100% - 20px) calc(100% - 40px);
}
</style>
#### 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 `<length>`, `<frequency>`, `<angle>`, `<time>`, `<number>`, `<color>`, or `<integer>` is allowed, like width, height, font-size, top, left, etc.
#### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
* https://caniuse.com/#feat=calc
<!-- tags: other -->