diff --git a/snippets/clearfix.md b/snippets/clearfix.md index f5f39f667..e6ca6ed11 100644 --- a/snippets/clearfix.md +++ b/snippets/clearfix.md @@ -14,7 +14,7 @@ Ensures that an element self-clears its children. ``` ```css -.clearfix::after { +.clearfix:after { content: ''; display: block; clear: both; @@ -27,7 +27,7 @@ Ensures that an element self-clears its children. #### Explanation -1. `.clearfix::after` defines a pseudo-element. +1. `.clearfix:after` defines a pseudo-element. 2. `content: ''` allows the pseudo-element to affect layout. 3. `clear: both` indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context. diff --git a/snippets/gradient-border.md b/snippets/gradient-border.md deleted file mode 100644 index cf093f4f8..000000000 --- a/snippets/gradient-border.md +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Gradient border -tags: visual,intermediate ---- - -Creates a gradient border. - -```html -
-

Gradient border!

-
-``` - -```css -.gradient-border { - position: relative; - border: solid 1px transparent; - border-radius: 10px; - background-color: #f7f7fe; - background-clip: padding-box; - margin: 8px; - padding: 8px 16px; -} - -.gradient-border:before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - margin: -1px; - border-radius: inherit; - background: linear-gradient(to bottom, #d3e7ec, #fff); -} -``` - -#### Explanation - -- Create a block with a transparent border, relative position and a background. -- Absolute position the `:before` pseudo-element with a gradient background and `z-index: -1`. -- Use `top: 0`, `right: 0`, `bottom: 0`, `left: 0` to make the pseudo-element equal size to its parent element, `margin: -1px` to make it larger. -- Use `background-clip: padding-box` to not draw the parent element's background below the border. - -#### Browser support - -- https://caniuse.com/#feat=mdn-css_properties_background_background-clip diff --git a/snippets/gradient-text.md b/snippets/gradient-text.md index cdf8fc232..631bee071 100644 --- a/snippets/gradient-text.md +++ b/snippets/gradient-text.md @@ -11,17 +11,18 @@ Gives text a gradient color. ```css .gradient-text { - background: -webkit-linear-gradient(pink, red); + background: linear-gradient(#70D6FF, #00072D); -webkit-text-fill-color: transparent; -webkit-background-clip: text; + font-size: 32px; } ``` #### Explanation -1. `background: -webkit-linear-gradient(...)` gives the text element a gradient background. -2. `webkit-text-fill-color: transparent` fills the text with a transparent color. -3. `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color. +- `background: -webkit-linear-gradient(...)` gives the text element a gradient background. +- `webkit-text-fill-color: transparent` fills the text with a transparent color. +- `webkit-background-clip: text` clips the background with the text, filling the text with the gradient background as the color. #### Browser support diff --git a/snippets/hairline-border.md b/snippets/hairline-border.md deleted file mode 100644 index 11ca9d175..000000000 --- a/snippets/hairline-border.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Hairline border -tags: visual,advanced ---- - -Gives an element a border equal to 1 native device pixel in width, which can look very sharp and crisp. - -```html -
text
-``` - -```css -.hairline-border { - box-shadow: 0 0 0 1px; -} - -@media (min-resolution: 2dppx) { - .hairline-border { - box-shadow: 0 0 0 0.5px; - } -} - -@media (min-resolution: 3dppx) { - .hairline-border { - box-shadow: 0 0 0 0.33333333px; - } -} - -@media (min-resolution: 4dppx) { - .hairline-border { - box-shadow: 0 0 0 0.25px; - } -} -``` - -#### Explanation - -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 (`1dppx` equals 96 DPI), setting the spread of the `box-shadow` equal to `1 / dppx`. - -#### Browser Support - -⚠️ Needs alternate syntax and JavaScript user agent checking for full support. - -- https://caniuse.com/#feat=css-boxshadow -- https://caniuse.com/#feat=css-media-resolution - -
- -\* Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both. diff --git a/snippets/hamburger-button.md b/snippets/hamburger-button.md index 71b886baf..c1b8a8701 100644 --- a/snippets/hamburger-button.md +++ b/snippets/hamburger-button.md @@ -56,6 +56,3 @@ Displays a hamburger menu which transitions to a cross on hover. - Set `transition all 0.5s` so that both `transform` and `opacity` properties are animated for half a second. #### Browser support - -- https://caniuse.com/#feat=flexbox -- https://caniuse.com/#feat=css-transitions diff --git a/snippets/height-transition.md b/snippets/height-transition.md index ae8065133..b0becd561 100644 --- a/snippets/height-transition.md +++ b/snippets/height-transition.md @@ -8,7 +8,7 @@ Transitions an element's height from `0` to `auto` when its height is unknown. ```html
Hover me to see a height transition. -
content
+
Additional content
``` @@ -25,22 +25,19 @@ Transitions an element's height from `0` to `auto` when its height is unknown. ``` ```js -var el = document.querySelector('.el') -var height = el.scrollHeight -el.style.setProperty('--max-height', height + 'px') +let el = document.querySelector('.el'); +let height = el.scrollHeight; +el.style.setProperty('--max-height', height + 'px'); ``` #### Explanation -1. `transition: max-height: 0.5s cubic-bezier(...)` specifies that changes to `max-height` should be transitioned over 0.5 seconds, using an `ease-out-quint` timing function. -2. `overflow: hidden` prevents the contents of the hidden element from overflowing its container. -3. `max-height: 0` specifies that the element has no height initially. -4. `.target:hover > .el` specifies that when the parent is hovered over, target a child `.el` within it and use the `--max-height` variable which was defined by JavaScript. - -
- -1. `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element. -2. `el.style.setProperty(...)` sets the `--max-height` CSS variable which is used to specify the `max-height` of the element the target is hovered over, allowing it to transition smoothly from 0 to auto. +- `transition: max-height: 0.5s cubic-bezier(...)` specifies that changes to `max-height` should be transitioned over 0.5 seconds, using an `ease-out-quint` timing function. +- `overflow: hidden` prevents the contents of the hidden element from overflowing its container. +- `max-height: 0` specifies that the element has no height initially. +- `.target:hover > .el` specifies that when the parent is hovered over, target a child `.el` within it and use the `--max-height` variable which was defined by JavaScript. +- `el.scrollHeight` is the height of the element including overflow, which will change dynamically based on the content of the element. +- `el.style.setProperty(...)` sets the `--max-height` CSS variable which is used to specify the `max-height` of the element the target is hovered over, allowing it to transition smoothly from 0 to auto. #### Browser Support diff --git a/snippets/hover-shadow-box-animation.md b/snippets/hover-shadow-box-animation.md index 4cb17ddb8..572b763a0 100644 --- a/snippets/hover-shadow-box-animation.md +++ b/snippets/hover-shadow-box-animation.md @@ -30,15 +30,12 @@ Creates a shadow box around the text when it is hovered. #### Explanation -1. `display: inline-block` to set width and length for `p` element thus making it an `inline-block`. -2. Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space. -3. `box-shadow:` to set up the box. -4. `transparent` to make box transparent. -5. `transition-property` to enable transitions for both `box-shadow` and `transform`. -6. `:hover` to activate whole css when hovering is done until `active`. -7. `transform: scale(1.2)` to change the scale, magnifying the text. +- `display: inline-block` to set width and length for `p` element thus making it an `inline-block`. +- Set `transform: perspective(1px)` to give element a 3D space by affecting the distance between the Z plane and the user and `translate(0)` to reposition the `p` element along z-axis in 3D space. +- `box-shadow:` to set up the box. +- `transparent` to make box transparent. +- `transition-property` to enable transitions for both `box-shadow` and `transform`. +- `:hover` to activate whole css when hovering is done until `active`. +- `transform: scale(1.2)` to change the scale, magnifying the text. #### Browser Support - -- https://caniuse.com/#feat=transforms3d -- https://caniuse.com/#feat=css-transitions diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index a675a49b3..509522cea 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -16,7 +16,7 @@ Creates an animated underline effect when the text is hovered over. color: #0087ca; } -.hover-underline-animation::after { +.hover-underline-animation:after { content: ''; position: absolute; width: 100%; @@ -29,7 +29,7 @@ Creates an animated underline effect when the text is hovered over. transition: transform 0.25s ease-out; } -.hover-underline-animation:hover::after { +.hover-underline-animation:hover:after { transform: scaleX(1); transform-origin: bottom left; } @@ -37,18 +37,15 @@ Creates an animated underline effect when the text is hovered over. #### Explanation -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 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. -6. `transform: scaleX(0)` initially scales the pseudo element to 0 so it has no width and is not visible. -7. `bottom: 0` and `left: 0` position it to the bottom left of the block. -8. `transition: transform 0.25s ease-out` means changes to `transform` will be transitioned over 0.25 seconds with an `ease-out` timing function. -9. `transform-origin: bottom right` means the transform anchor point is positioned at the bottom right of the block. -10. `:hover::after` then uses `scaleX(1)` to transition the width to 100%, then changes the `transform-origin` to `bottom left` so that the anchor point is reversed, allowing it transition out in the other direction when hovered off. +- `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). +- `position: relative` on the element establishes a Cartesian positioning context for pseudo-elements. +- `:after` defines a pseudo-element. +- `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 pseudo-element spans the entire width of the text block. +- `transform: scaleX(0)` initially scales the pseudo element to 0 so it has no width and is not visible. +- `bottom: 0` and `left: 0` position it to the bottom left of the block. +- `transition: transform 0.25s ease-out` means changes to `transform` will be transitioned over 0.25 seconds with an `ease-out` timing function. +- `transform-origin: bottom right` means the transform anchor point is positioned at the bottom right of the block. +- `:hover:after` then uses `scaleX(1)` to transition the width to 100%, then changes the `transform-origin` to `bottom left` so that the anchor point is reversed, allowing it transition out in the other direction when hovered off. #### Browser support - -- https://caniuse.com/#feat=transforms2d -- https://caniuse.com/#feat=css-transitions diff --git a/snippets/last-item-with-remaining-available-height.md b/snippets/last-item-with-remaining-available-height.md deleted file mode 100644 index e403eedeb..000000000 --- a/snippets/last-item-with-remaining-available-height.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Last item with remaining available height -tags: layout,intermediate ---- - -Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window. - -```html -
-
Div 1
-
Div 2
-
Div 3
-
-``` - -```css -html, -body { - height: 100%; - margin: 0; -} - -.container { - height: 100%; - display: flex; - flex-direction: column; -} - -.container > div:last-child { - background-color: tomato; - flex: 1; -} -``` - -#### Explanation - -1. `height: 100%` sets the height of container as viewport height. -2. `display: flex` creates a flexbox layout. -3. `flex-direction: column` set the direction of flex items' order from top to down. -4. `flex-grow: 1` the flexbox will apply remaining available space of container to last child element. - -- The parent must have a viewport height. `flex-grow: 1` could be applied to the first or second element, which will occupy all available space. - -#### Browser support - -- https://caniuse.com/#feat=flexbox diff --git a/snippets/lobotomizedOwlSelector.md b/snippets/lobotomizedOwlSelector.md deleted file mode 100644 index dde6b4e8c..000000000 --- a/snippets/lobotomizedOwlSelector.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Lobotomized Owl Selector -tags: layout,beginner ---- - -Sets an automatically inherited margin for all elements that follow other elements in the document. - -```html -
-
Parent 01
-
Parent 02 -
Child 01
-
Child 02
-
-
Parent 03
-
-``` - -```css -* + * { - margin-top: 1.5em; -} -``` - -#### Explanation - -- In this example, all elements in the flow of the document that follow other elements will receive `margin-top: 1.5em`. -- This example assumes that the paragraphs' `font-size` is 1em and its `line-height` is 1.5. -_Note: You can read [this article](https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/_) for a more detailed explanation._ - -#### Browser support diff --git a/snippets/masonry-layout.md b/snippets/masonry-layout.md index 3e29a1230..fad158b58 100644 --- a/snippets/masonry-layout.md +++ b/snippets/masonry-layout.md @@ -65,14 +65,8 @@ Creates a vertical masonry layout using HTML and CSS. #### Explanation - Create a masonry-style layout that consists of "bricks" that fall into each other with either a fixed `width` (vertical layout) or a fixed `height` (horizontal layout), forming a perfect fit. Especially useful when working with images. -- `.masonry-container` is the container for the masonry layout. Within that container, there's a `div.masonry-columns`, which will automatically put each child element, `.masonry-brick`, into the layout. +- `.masonry-container` is the container for the masonry layout. Within that container, there's a `div.masonry-columns`, which will automatically put each child element, `.masonry-brick`, into the layout. - `.masonry-brick` must be have `display: block` to allow the layout to flow properly, while the `:first-child` of this class should have a different `margin` to account for its positioning. - CSS variables are used to allow for greater flexibility for the layout, while media queries ensure that the layout flows responsively in different viewport sizes. #### Browser support - -- https://www.caniuse.com/#feat=css-variables -- https://www.caniuse.com/#feat=calc -- https://www.caniuse.com/#feat=mdn-css_properties_column-count -- https://www.caniuse.com/#feat=mdn-css_properties_column-width -- https://www.caniuse.com/#feat=mdn-css_properties_column-gap_multicol_context diff --git a/snippets/mouse-cursor-gradient-tracking.md b/snippets/mouse-cursor-gradient-tracking.md index 6191c7e78..8f953dcee 100644 --- a/snippets/mouse-cursor-gradient-tracking.md +++ b/snippets/mouse-cursor-gradient-tracking.md @@ -28,7 +28,7 @@ A hover effect where the gradient follows the mouse cursor. position: relative; } -.mouse-cursor-gradient-tracking::before { +.mouse-cursor-gradient-tracking:before { --size: 0; content: ''; position: absolute; @@ -41,27 +41,27 @@ A hover effect where the gradient follows the mouse cursor. transition: width 0.2s ease, height 0.2s ease; } -.mouse-cursor-gradient-tracking:hover::before { +.mouse-cursor-gradient-tracking:hover:before { --size: 200px; } ``` ```js -var btn = document.querySelector('.mouse-cursor-gradient-tracking') +let btn = document.querySelector('.mouse-cursor-gradient-tracking'); btn.onmousemove = function(e) { - var rect = e.target.getBoundingClientRect() - var x = e.clientX - rect.left - var y = e.clientY - rect.top - btn.style.setProperty('--x', x + 'px') - btn.style.setProperty('--y', y + 'px') + let rect = e.target.getBoundingClientRect(); + let x = e.clientX - rect.left; + let y = e.clientY - rect.top; + btn.style.setProperty('--x', x + 'px'); + btn.style.setProperty('--y', y + 'px'); } ``` #### Explanation -1. `--x` and `--y` are used to track the position of the mouse on the button. -2. `--size` is used to keep modify of the gradient's dimensions. -3. `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion. +- `--x` and `--y` are used to track the position of the mouse on the button. +- `--size` is used to keep modify of the gradient's dimensions. +- `background: radial-gradient(circle closest-side, pink, transparent);` creates the gradient at the correct postion. #### Browser support diff --git a/snippets/navigation-list-item-hover-and-focus-effect.md b/snippets/navigation-list-item-hover-and-focus-effect.md index cc9bedf84..4095348dd 100644 --- a/snippets/navigation-list-item-hover-and-focus-effect.md +++ b/snippets/navigation-list-item-hover-and-focus-effect.md @@ -6,28 +6,28 @@ tags: visual,beginner Fancy hover and focus effect at navigation items using transform CSS property. ```html -