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

Remove redundant snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-03-09 19:56:49 +02:00
parent 540ac618a8
commit 65dfd45e97
2 changed files with 0 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
snippets/calc.md
View File

@ -1,29 +0,0 @@
---
title: Calc()
tags: 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);
}
```
#### 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
- https://caniuse.com/#feat=calc

37
snippets/custom-variables.md
View File

@ -1,37 +0,0 @@
---
title: Custom variables
tags: other
---
CSS variables that contain specific values to be reused throughout a document.
```html
<p class="custom-variables">CSS is awesome!</p>
```
```css
:root {
/* Place variables within here to use the variables globally. */
}
.custom-variables {
--some-color: #da7800;
--some-keyword: italic;
--some-size: 1.25em;
--some-complex-value: 1px 1px 2px whitesmoke, 0 0 1em slategray, 0 0 0.2em slategray;
color: var(--some-color);
font-size: var(--some-size);
font-style: var(--some-keyword);
text-shadow: var(--some-complex-value);
}
```
#### Explanation
- The variables are defined globally within the `:root` CSS pseudo-class which matches the root element of a tree representing the document. Variables can also be scoped to a selector if defined within the block.
- Declare a variable with `--variable-name:`.
- Reuse variables throughout the document using the `var(--variable-name)` function.
#### Browser support
- https://caniuse.com/#feat=css-variables