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

Update snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 13:34:04 +03:00
parent d35dab24c3
commit 3077d4c71f
27 changed files with 141 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
snippets/shape-separator.md
View File

@ -16,7 +16,7 @@ Uses an SVG shape to separate two different blocks to create more a interesting
background: #333;
}
.shape-separator::after {
.shape-separator:after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");
position: absolute;
@ -28,13 +28,13 @@ Uses an SVG shape to separate two different blocks to create more a interesting
#### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.
2. `::after` defines a pseudo element.
3. `background-image: url(...)` adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use [the URL-encoder for SVG](http://yoksel.github.io/url-encoder/).
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
5. `width: 100%` ensures the element stretches the entire width of its parent.
6. `height: 12px` is the same height as the shape.
7. `bottom: 0` positions the pseudo element at the bottom of the parent.
- `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.
- `:after` defines a pseudo element.
- `background-image: url(...)` adds the SVG shape (a 24x12 triangle) as the background image of the pseudo element, which repeats by default. It must be the same color as the block that is being separated. For other shapes, we can use [the URL-encoder for SVG](http://yoksel.github.io/url-encoder/).
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
- `width: 100%` ensures the element stretches the entire width of its parent.
- `height: 12px` is the same height as the shape.
- `bottom: 0` positions the pseudo element at the bottom of the parent.
#### Browser support