From 1d7d67a48d72168133e00429ba0f58415ea8bd4d Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Thu, 1 Mar 2018 18:31:57 +0200 Subject: [PATCH] Updated typos in snippets --- snippets/hairline-border.md | 2 +- snippets/hover-underline-animation.md | 2 +- snippets/overflow-scroll-gradient.md | 6 +++--- snippets/shape-separator.md | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/snippets/hairline-border.md b/snippets/hairline-border.md index 42a3e0c47..cee9f9883 100644 --- a/snippets/hairline-border.md +++ b/snippets/hairline-border.md @@ -67,7 +67,7 @@ very sharp and crisp. #### 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), setting the spread of the `box-shadow` equal to `1 / dppx`. diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index e142ffab6..51f8d3064 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -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 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. 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. diff --git a/snippets/overflow-scroll-gradient.md b/snippets/overflow-scroll-gradient.md index 0c4c3e644..e4603cb4b 100644 --- a/snippets/overflow-scroll-gradient.md +++ b/snippets/overflow-scroll-gradient.md @@ -78,16 +78,16 @@ document.querySelector('.snippet-demo__overflow-scroll-gradient__scroller').inne #### 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. 3. `background-image: linear-gradient(...)` adds a linear gradient that fades from transparent to white (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. 5. `width: 300px` matches the size of the scrolling element (which is a child of the parent that has 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. -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 diff --git a/snippets/shape-separator.md b/snippets/shape-separator.md index dc5f08108..a0a5479e4 100644 --- a/snippets/shape-separator.md +++ b/snippets/shape-separator.md @@ -49,10 +49,10 @@ 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 psuedo elements. +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 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. 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.