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

Updated typos in snippets

Browse Source
This commit is contained in:
Angelos Chalaris
2018-03-01 18:31:57 +02:00
parent 386237b681
commit 1d7d67a48d
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippets/hairline-border.md
View File

@ -67,7 +67,7 @@ very sharp and crisp.
#### Explanation #### Explanation
1. `box-shadow`, when only using spread, adds a psuedo-border which can use subpixels\*. 1. `box-shadow`, when only using spread, adds a pseudo-border which can use subpixels\*.
2. Use `@media (min-resolution: ...)` to check the device pixel ratio (`1ddpx` equals 96 DPI), 2. Use `@media (min-resolution: ...)` to check the device pixel ratio (`1ddpx` equals 96 DPI),
setting the spread of the `box-shadow` equal to `1 / dppx`. setting the spread of the `box-shadow` equal to `1 / dppx`.

2
snippets/hover-underline-animation.md
View File

@ -70,7 +70,7 @@ Creates an animated underline effect when the text is hovered over.
1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from 1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from
spanning the entire parent width rather than just the content (text). spanning the entire parent width rather than just the content (text).
2. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. 2. `position: relative` on the element establishes a Cartesian positioning context for pseudo-elements.
3. `::after` defines a pseudo-element. 3. `::after` defines a pseudo-element.
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent. 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 pseudo-element spans the entire width of the text block. 5. `width: 100%` ensures the pseudo-element spans the entire width of the text block.

6
snippets/overflow-scroll-gradient.md
View File

@ -78,16 +78,16 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne
#### Explanation #### Explanation
1. `position: relative` on the parent establishes a Cartesian positioning context for psuedo-elements. 1. `position: relative` on the parent establishes a Cartesian positioning context for pseudo-elements.
2. `::after` defines a pseudo element. 2. `::after` defines a pseudo element.
3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white 3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white
(top to bottom). (top to bottom).
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent. 4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has 5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has
the pseudo element). the pseudo element).
6. `height: 25px` is the height of the fading gradient psuedo-element, which should be kept relatively small. 6. `height: 25px` is the height of the fading gradient pseudo-element, which should be kept relatively small.
7. `bottom: 0` positions the pseudo-element at the bottom of the parent. 7. `bottom: 0` positions the pseudo-element at the bottom of the parent.
8. `pointer-events: none` specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive. 8. `pointer-events: none` specifies that the pseudo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
#### Browser support #### Browser support

4
snippets/shape-separator.md
View File

@ -49,10 +49,10 @@ Uses an SVG shape to separate two different blocks to create more a interesting
#### Explanation #### Explanation
1. `position: relative` on the element establishes a Cartesian positioning context for psuedo elements. 1. `position: relative` on the element establishes a Cartesian positioning context for pseudo elements.
2. `::after` defines a pseudo element. 2. `::after` defines a pseudo element.
3. `background-image: url(...)` adds the SVG shape (a 24x24 triangle in base64 format) as the background image 3. `background-image: url(...)` adds the SVG shape (a 24x24 triangle in base64 format) as the background image
of the psuedo element, which repeats by default. It must be the same color as the block that is being of the pseudo element, which repeats by default. It must be the same color as the block that is being
separated. separated.
4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent. 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. 5. `width: 100%` ensures the element stretches the entire width of its parent.