diff --git a/snippets/display-table-centering.md b/snippets/display-table-centering.md index ba1876696..949888939 100644 --- a/snippets/display-table-centering.md +++ b/snippets/display-table-centering.md @@ -33,14 +33,11 @@ Vertically and horizontally centers a child element within its parent element us #### Explanation -1. `display: table` on '.center' allows the element to behave like a `` HTML element. -2. 100% height and width on '.center' allows the element to fill the available space within its parent element. -3. `display: table-cell` on '.center > span' allows the element to behave like an
HTML element. -4. `text-align: center` on '.center > span' centers the child element horizontally. -5. `vertical-align: middle` on '.center > span' centers the child element vertically. - +- `display: table` on '.center' allows the element to behave like a `` HTML element. +- 100% height and width on '.center' allows the element to fill the available space within its parent element. +- `display: table-cell` on '.center > span' allows the element to behave like an
HTML element. +- `text-align: center` on '.center > span' centers the child element horizontally. +- `vertical-align: middle` on '.center > span' centers the child element vertically. - The outer parent ('.container' in this case) must have a fixed height and width. #### Browser support - -- https://caniuse.com/#search=display%3A%20table diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md index cc2d9ae8f..39b7d2db9 100644 --- a/snippets/donut-spinner.md +++ b/snippets/donut-spinner.md @@ -35,6 +35,3 @@ Creates a donut spinner that can be used to indicate the loading of content. - Use a semi-transparent `border` for the whole element, except one side that will serve as the loading indicator for the donut. Use `animation` to rotate the element. #### Browser support - -- https://caniuse.com/#feat=css-animation -- https://caniuse.com/#feat=transforms2d diff --git a/snippets/drop-cap.md b/snippets/drop-cap.md index 93e264a62..d5b97067c 100644 --- a/snippets/drop-cap.md +++ b/snippets/drop-cap.md @@ -26,5 +26,3 @@ p:first-child::first-letter { - Use the `::first-letter` pseudo-element to style the first element of the paragraph, use the `:first-child` selector to select only the first paragraph. #### Browser support - -- https://caniuse.com/#feat=first-letter diff --git a/snippets/dynamic-shadow.md b/snippets/dynamic-shadow.md index 4709e1a6c..68f8cb9b6 100644 --- a/snippets/dynamic-shadow.md +++ b/snippets/dynamic-shadow.md @@ -18,7 +18,7 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element z-index: 1; } -.dynamic-shadow::after { +.dynamic-shadow:after { content: ''; width: 100%; height: 100%; @@ -33,17 +33,15 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element #### Explanation -1. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. -2. `z-index: 1` establishes a new stacking context. -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%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size. -6. `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element. -7. `top: 0.5rem` offsets the pseudo-element down slightly from its parent. -8. `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath. -9. `opacity: 0.7` makes the pseudo-element partially transparent. -10. `z-index: -1` positions the pseudo-element behind the parent but in front of the background. +- `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. +- `z-index: 1` establishes a new stacking context. +- `: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%` and `height: 100%` sizes the pseudo-element to fill its parent's dimensions, making it equal in size. +- `background: inherit` causes the pseudo-element to inherit the linear gradient specified on the element. +- `top: 0.5rem` offsets the pseudo-element down slightly from its parent. +- `filter: blur(0.4rem)` will blur the pseudo-element to create the appearance of a shadow underneath. +- `opacity: 0.7` makes the pseudo-element partially transparent. +- `z-index: -1` positions the pseudo-element behind the parent but in front of the background. #### Browser support - -- https://caniuse.com/#feat=css-filters diff --git a/snippets/etched-text.md b/snippets/etched-text.md index 4611ed62b..82c982dce 100644 --- a/snippets/etched-text.md +++ b/snippets/etched-text.md @@ -25,5 +25,3 @@ Creates an effect where text appears to be "etched" or engraved into the backgro - The text color should be slightly faded to make it look like it's engraved/carved out of the background. #### Browser support - -- https://caniuse.com/#feat=css-textshadow diff --git a/snippets/evenly-distributed-children.md b/snippets/evenly-distributed-children.md index 62282e80c..92e614a78 100644 --- a/snippets/evenly-distributed-children.md +++ b/snippets/evenly-distributed-children.md @@ -28,5 +28,3 @@ Evenly distributes child elements within a parent element. _Note: Alternatively, use `justify-content: space-around` to distribute the children with space around them, rather than between them._ #### Browser support - -- https://caniuse.com/#feat=flexbox diff --git a/snippets/fit-image-in-container.md b/snippets/fit-image-in-container.md index 6472ffd0b..c261dcd1c 100644 --- a/snippets/fit-image-in-container.md +++ b/snippets/fit-image-in-container.md @@ -1,6 +1,6 @@ --- title: Fit image in container -tags: layout, visual +tags: layout,visual,intermediate --- Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property. @@ -36,5 +36,3 @@ Changes the fit and position of an image within its container while preserving i - `object-position: [x] [y]` positions the image within the container. #### Browser support - -- https://caniuse.com/#feat=object-fit diff --git a/snippets/flexbox-centering.md b/snippets/flexbox-centering.md index 8af0e933b..f8a34d73c 100644 --- a/snippets/flexbox-centering.md +++ b/snippets/flexbox-centering.md @@ -6,7 +6,9 @@ tags: layout,beginner Horizontally and vertically centers a child element within a parent element using `flexbox`. ```html -
Centered content.
+
+
Centered content.
+
``` ```css @@ -20,10 +22,8 @@ Horizontally and vertically centers a child element within a parent element usin #### Explanation -1. `display: flex` creates a flexbox layout. -2. `justify-content: center` centers the child horizontally. -3. `align-items: center` centers the child vertically. +- `display: flex` creates a flexbox layout. +- `justify-content: center` centers the child horizontally. +- `align-items: center` centers the child vertically. #### Browser support - -- https://caniuse.com/#feat=flexbox diff --git a/snippets/focus-within.md b/snippets/focus-within.md index 7a127a8d4..f554d95c6 100644 --- a/snippets/focus-within.md +++ b/snippets/focus-within.md @@ -6,24 +6,33 @@ tags: visual,interactivity,intermediate Changes the appearance of a form if any of its children are focused. ```html -
-
-
- -
-
+
+ + +
+ + +
``` ```css form { - border: 3px solid #2d98da; - color: #000000; - padding: 4px; + border: 2px solid #52B882; + padding: 8px; + border-radius: 2px; } form:focus-within { - background: #f7b731; - color: #000000; + background: #7CF0BD; +} + +label { + display: inline-block; + width: 72px; +} + +input { + margin: 4px; } ``` diff --git a/snippets/ghost-trick.md b/snippets/ghost-trick.md deleted file mode 100644 index 3cca8ed2b..000000000 --- a/snippets/ghost-trick.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Ghost trick -tags: layout,intermediate ---- - -Vertically centers an element in another. - -```html -
-

Vertically centered without changing the position property.

-
-``` - -```css -.ghosting { - height: 300px; - background: #0ff; -} - -.ghosting:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; -} - -p { - display: inline-block; - vertical-align: middle; -} -``` - -#### Explanation - -- Use the style of a `:before` pseudo-element to vertically align inline elements without changing their `position` property. - -#### Browser support - -- https://caniuse.com/#feat=inline-block