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

Update snippet structure

Browse Source
This commit is contained in:
Angelos Chalaris
2019-08-22 12:30:43 +03:00
parent ae9eaee179
commit 343f8fd4c7
46 changed files with 276 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
snippets/bouncing-loader.md
View File

@ -1,4 +1,7 @@
### Bouncing loader ---
title: Bouncing loader
tags: animation,intermediate
---
Creates a bouncing loader animation. Creates a bouncing loader animation.
@ -67,4 +70,5 @@ Note: `1rem` is usually `16px`.
- https://caniuse.com/#feat=css-animation - https://caniuse.com/#feat=css-animation
<!-- tags: animation -->

8
snippets/box-sizing-reset.md
View File

@ -1,4 +1,7 @@
### Box-sizing reset ---
title: Box-sizing reset
tags: layout,intermediate
---
Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`. Resets the box-model so that `width`s and `height`s are not affected by their `border`s or `padding`.
@ -45,4 +48,5 @@ html {
- https://caniuse.com/#feat=css3-boxsizing - https://caniuse.com/#feat=css3-boxsizing
<!-- tags: layout -->

8
snippets/button-border-animation.md
View File

@ -1,4 +1,7 @@
### Button border animation ---
title: Button border animation
tags: animation,intermediate
---
Creates a border animation on hover. Creates a border animation on hover.
@ -56,5 +59,6 @@ Use the `:before` and `:after` pseduo-elements as borders that animate on hover.
#### Browser support #### Browser support
<!-- tags: animation -->
<!-- date: 2018-10-30 --> <!-- date: 2018-10-30 -->

8
snippets/calc.md
View File

@ -1,4 +1,7 @@
### Calc() ---
title: Calc()
tags: other,intermediate
---
The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression. The function calc() allows to define CSS values with the use of mathematical expressions, the value adopted for the property is the result of a mathematical expression.
@ -50,4 +53,5 @@ So now it's possible using calc():
- https://caniuse.com/#feat=calc - https://caniuse.com/#feat=calc
<!-- tags: other -->

8
snippets/circle.md
View File

@ -1,4 +1,7 @@
### Circle ---
title: Circle
tags: visual,intermediate
---
Creates a circle shape with pure CSS. Creates a circle shape with pure CSS.
@ -32,4 +35,5 @@ values will create an ellipse.
- https://caniuse.com/#feat=border-radius - https://caniuse.com/#feat=border-radius
<!-- tags: visual -->

8
snippets/clearfix.md
View File

@ -1,4 +1,7 @@
### Clearfix ---
title: Clearfix
tags: layout,intermediate
---
Ensures that an element self-clears its children. Ensures that an element self-clears its children.
@ -41,4 +44,5 @@ Ensures that an element self-clears its children.
<span class="snippet__support-note">⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).</span> <span class="snippet__support-note">⚠️ For this snippet to work properly you need to ensure that there are no non-floating children in the container and that there are no tall floats before the clearfixed container but in the same formatting context (e.g. floated columns).</span>
<!-- tags: layout -->

8
snippets/constant-width-to-height-ratio.md
View File

@ -1,4 +1,7 @@
### Constant width to height ratio ---
title: Constant width to height ratio
tags: layout,intermediate
---
Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion
(i.e., its width to height ratio remains constant). (i.e., its width to height ratio remains constant).
@ -40,4 +43,5 @@ This method also allows content to be placed inside the element normally.
#### Browser support #### Browser support
<!-- tags: layout -->

8
snippets/counter.md
View File

@ -1,4 +1,7 @@
### Counter ---
title: Counter
tags: visual, other,intermediate
---
Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used.
@ -52,4 +55,5 @@ You can create a ordered list using any type of HTML.
- https://caniuse.com/#feat=css-counters - https://caniuse.com/#feat=css-counters
<!-- tags: visual, other -->

8
snippets/custom-scrollbar.md
View File

@ -1,4 +1,7 @@
### Custom scrollbar ---
title: Custom scrollbar
tags: visual,intermediate
---
Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms. Customizes the scrollbar style for the document and elements with scrollable overflow, on WebKit platforms.
@ -56,4 +59,5 @@ There are many other pseudo-elements that you can use to style scrollbars. For m
- https://caniuse.com/#feat=css-scrollbar - https://caniuse.com/#feat=css-scrollbar
<!-- tags: visual -->

8
snippets/custom-text-selection.md
View File

@ -1,4 +1,7 @@
### Custom text selection ---
title: Custom text selection
tags: visual,intermediate
---
Changes the styling of text selection. Changes the styling of text selection.
@ -34,4 +37,5 @@ in any specification.</span>
- https://caniuse.com/#feat=css-selection - https://caniuse.com/#feat=css-selection
<!-- tags: visual -->

8
snippets/custom-variables.md
View File

@ -1,4 +1,7 @@
### Custom variables ---
title: Custom variables
tags: other,intermediate
---
CSS variables that contain specific values to be reused throughout a document. CSS variables that contain specific values to be reused throughout a document.
@ -41,4 +44,5 @@ Reuse variables throughout the document using the `var(--variable-name)` functio
- https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
<!-- tags: other -->

8
snippets/disable-selection.md
View File

@ -1,4 +1,7 @@
### Disable selection ---
title: Disable selection
tags: interactivity,intermediate
---
Makes the content unselectable. Makes the content unselectable.
@ -31,4 +34,5 @@ Makes the content unselectable.
- https://caniuse.com/#feat=user-select-none - https://caniuse.com/#feat=user-select-none
<!-- tags: interactivity -->

8
snippets/display-table-centering.md
View File

@ -1,4 +1,7 @@
### Display table centering ---
title: Display table centering
tags: layout,intermediate
---
Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`). Vertically and horizontally centers a child element within its parent element using `display: table` (as an alternative to `flexbox`).
@ -48,4 +51,5 @@ The outer parent ('.container' in this case) must have a fixed height and width.
- https://caniuse.com/#search=display%3A%20table - https://caniuse.com/#search=display%3A%20table
<!-- tags: layout -->

8
snippets/donut-spinner.md
View File

@ -1,4 +1,7 @@
### Donut spinner ---
title: Donut spinner
tags: animation,intermediate
---
Creates a donut spinner that can be used to indicate the loading of content. Creates a donut spinner that can be used to indicate the loading of content.
@ -44,4 +47,5 @@ serve as the loading indicator for the donut. Use `animation` to rotate the elem
- https://caniuse.com/#feat=css-animation - https://caniuse.com/#feat=css-animation
- https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
<!-- tags: animation -->

8
snippets/dynamic-shadow.md
View File

@ -1,4 +1,7 @@
### Dynamic shadow ---
title: Dynamic shadow
tags: visual,intermediate
---
Creates a shadow similar to `box-shadow` but based on the colors of the element itself. Creates a shadow similar to `box-shadow` but based on the colors of the element itself.
@ -52,4 +55,5 @@ Creates a shadow similar to `box-shadow` but based on the colors of the element
- https://caniuse.com/#feat=css-filters - https://caniuse.com/#feat=css-filters
<!-- tags: visual -->

8
snippets/easing-variables.md
View File

@ -1,4 +1,7 @@
### Easing variables ---
title: Easing variables
tags: animation,intermediate
---
Variables that can be reused for `transition-timing-function` properties, more Variables that can be reused for `transition-timing-function` properties, more
powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`. powerful than the built-in `ease`, `ease-in`, `ease-out` and `ease-in-out`.
@ -63,4 +66,5 @@ The variables are defined globally within the `:root` CSS pseudo-class which mat
- https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
<!-- tags: animation -->

8
snippets/etched-text.md
View File

@ -1,4 +1,7 @@
### Etched text ---
title: Etched text
tags: visual,intermediate
---
Creates an effect where text appears to be "etched" or engraved into the background. Creates an effect where text appears to be "etched" or engraved into the background.
@ -35,4 +38,5 @@ of the background.
- https://caniuse.com/#feat=css-textshadow - https://caniuse.com/#feat=css-textshadow
<!-- tags: visual -->

8
snippets/evenly-distributed-children.md
View File

@ -1,4 +1,7 @@
### Evenly distributed children ---
title: Evenly distributed children
tags: layout,intermediate
---
Evenly distributes child elements within a parent element. Evenly distributes child elements within a parent element.
@ -36,4 +39,5 @@ Alternatively, use `justify-content: space-around` to distribute the children wi
- https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
<!-- tags: layout -->

8
snippets/fit-image-in-container.md
View File

@ -1,4 +1,7 @@
### Fit image in container ---
title: Fit image in container
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. 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.
@ -42,5 +45,6 @@ Changes the fit and position of an image within its container while preserving i
- https://caniuse.com/#feat=object-fit - https://caniuse.com/#feat=object-fit
<!-- tags: layout, visual -->
<!-- date: 2018-10-31 --> <!-- date: 2018-10-31 -->

8
snippets/flexbox-centering.md
View File

@ -1,4 +1,7 @@
### Flexbox centering ---
title: Flexbox centering
tags: layout,intermediate
---
Horizontally and vertically centers a child element within a parent element using `flexbox`. Horizontally and vertically centers a child element within a parent element using `flexbox`.
@ -33,4 +36,5 @@ Horizontally and vertically centers a child element within a parent element usin
- https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
<!-- tags: layout -->

8
snippets/focus-within.md
View File

@ -1,4 +1,7 @@
### Focus Within ---
title: Focus Within
tags: visual, interactivity,intermediate
---
Changes the appearance of a form if any of its children are focused. Changes the appearance of a form if any of its children are focused.
@ -45,4 +48,5 @@ If no link is provided, it defaults to 99+%. -->
- https://caniuse.com/#feat=css-focus-within - https://caniuse.com/#feat=css-focus-within
<!-- tags: visual, interactivity -->

8
snippets/fullscreen.md
View File

@ -1,4 +1,7 @@
### Fullscreen ---
title: Fullscreen
tags: visual,intermediate
---
The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode. The :fullscreen CSS pseudo-class represents an element that's displayed when the browser is in fullscreen mode.
@ -58,4 +61,5 @@ The :fullscreen CSS pseudo-class represents an element that's displayed when the
- https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen - https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen
- https://caniuse.com/#feat=fullscreen - https://caniuse.com/#feat=fullscreen
<!-- tags: visual -->

8
snippets/ghost-trick.md
View File

@ -1,4 +1,7 @@
### Ghost trick ---
title: Ghost trick
tags: layout,intermediate
---
Vertically centers an element in another. Vertically centers an element in another.
@ -41,4 +44,5 @@ Use the style of a `:before` pseudo-element to vertically align inline elements
- https://caniuse.com/#feat=inline-block - https://caniuse.com/#feat=inline-block
<!-- tags: layout -->

8
snippets/gradient-text.md
View File

@ -1,4 +1,7 @@
### Gradient text ---
title: Gradient text
tags: visual,intermediate
---
Gives text a gradient color. Gives text a gradient color.
@ -33,4 +36,5 @@ Gives text a gradient color.
- https://caniuse.com/#feat=text-stroke - https://caniuse.com/#feat=text-stroke
<!-- tags: visual -->

8
snippets/grid-centering.md
View File

@ -1,4 +1,7 @@
### Grid centering ---
title: Grid centering
tags: layout,intermediate
---
Horizontally and vertically centers a child element within a parent element using `grid`. Horizontally and vertically centers a child element within a parent element using `grid`.
@ -31,4 +34,5 @@ Horizontally and vertically centers a child element within a parent element usin
- https://caniuse.com/#feat=css-grid - https://caniuse.com/#feat=css-grid
<!-- tags: layout -->

8
snippets/hairline-border.md
View File

@ -1,4 +1,7 @@
### Hairline border ---
title: Hairline border
tags: visual,intermediate
---
Gives an element a border equal to 1 native device pixel in width, which can look Gives an element a border equal to 1 native device pixel in width, which can look
very sharp and crisp. very sharp and crisp.
@ -54,4 +57,5 @@ very sharp and crisp.
\*Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both. \*Chrome does not support subpixel values on `border`. Safari does not support subpixel values on `box-shadow`. Firefox supports subpixel values on both.
<!-- tags: visual -->

8
snippets/height-transition.md
View File

@ -1,4 +1,7 @@
### Height transition ---
title: Height transition
tags: animation,intermediate
---
Transitions an element's height from `0` to `auto` when its height is unknown. Transitions an element's height from `0` to `auto` when its height is unknown.
@ -62,4 +65,5 @@ el.style.setProperty('--max-height', height + 'px')
- https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
- https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: animation -->

8
snippets/hover-shadow-box-animation.md
View File

@ -1,4 +1,7 @@
### Hover shadow box animation ---
title: Hover shadow box animation
tags: animation,intermediate
---
Creates a shadow box around the text when it is hovered. Creates a shadow box around the text when it is hovered.
@ -45,4 +48,5 @@ Creates a shadow box around the text when it is hovered.
- https://caniuse.com/#feat=transforms3d - https://caniuse.com/#feat=transforms3d
- https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: animation -->

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

@ -1,4 +1,7 @@
### Hover underline animation ---
title: Hover underline animation
tags: animation,intermediate
---
Creates an animated underline effect when the text is hovered over. Creates an animated underline effect when the text is hovered over.
@ -60,4 +63,5 @@ Creates an animated underline effect when the text is hovered over.
- https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
- https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: animation -->

8
snippets/last-item-with-remaining-available-height.md
View File

@ -1,4 +1,7 @@
### Last item with remaining available height ---
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. Take advantage of available viewport space by giving the last element the remaining available space in current viewport, even when resizing the window.
@ -50,5 +53,6 @@ The parent must have a viewport height. `flex-grow: 1` could be applied to the f
- https://caniuse.com/#feat=flexbox - https://caniuse.com/#feat=flexbox
<!-- tags: layout -->
<!-- date: 2018-09-30 --> <!-- date: 2018-09-30 -->

8
snippets/mouse-cursor-gradient-tracking.md
View File

@ -1,4 +1,7 @@
### Mouse cursor gradient tracking ---
title: Mouse cursor gradient tracking
tags: visual, interactivity,intermediate
---
A hover effect where the gradient follows the mouse cursor. A hover effect where the gradient follows the mouse cursor.
@ -72,4 +75,5 @@ _TODO_
- https://caniuse.com/#feat=css-variables - https://caniuse.com/#feat=css-variables
<!-- tags: visual, interactivity -->

8
snippets/not-selector.md
View File

@ -1,4 +1,7 @@
### :not selector ---
title: :not selector
tags: visual,intermediate
---
The `:not` psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled. The `:not` psuedo selector is useful for styling a group of elements, while leaving the last (or specified) element unstyled.
@ -46,4 +49,5 @@ the `:last-child`.
- https://caniuse.com/#feat=css-sel3 - https://caniuse.com/#feat=css-sel3
<!-- tags: visual -->

8
snippets/offscreen.md
View File

@ -1,4 +1,7 @@
### Offscreen ---
title: Offscreen
tags: layout, visual,intermediate
---
A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility ([ADA](https://adata.org/learn-about-ada)) development when more context is needed for visually-impaired users. As an alternative to `display: none` which is not readable by screen readers or `visibility: hidden` which takes up physical space in the DOM. A bulletproof way to completely hide an element visually and positionally in the DOM while still allowing it to be accessed by JavaScript and readable by screen readers. This method is very useful for accessibility ([ADA](https://adata.org/learn-about-ada)) development when more context is needed for visually-impaired users. As an alternative to `display: none` which is not readable by screen readers or `visibility: hidden` which takes up physical space in the DOM.
@ -43,4 +46,5 @@ A bulletproof way to completely hide an element visually and positionally in the
- https://caniuse.com/#search=clip - https://caniuse.com/#search=clip
<!-- tags: layout, visual -->

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

@ -1,4 +1,7 @@
### Overflow scroll gradient ---
title: Overflow scroll gradient
tags: visual,intermediate
---
Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled. Adds a fading gradient to an overflowing element to better indicate there is more content to be scrolled.
@ -66,4 +69,5 @@ Adds a fading gradient to an overflowing element to better indicate there is mor
- https://caniuse.com/#feat=css-gradients - https://caniuse.com/#feat=css-gradients
<!-- tags: visual -->

8
snippets/popout-menu.md
View File

@ -1,4 +1,7 @@
### Popout menu ---
title: Popout menu
tags: interactivity,intermediate
---
Reveals an interactive popout menu on hover and focus. Reveals an interactive popout menu on hover and focus.
@ -46,4 +49,5 @@ Reveals an interactive popout menu on hover and focus.
#### Browser support #### Browser support
<!-- tags: interactivity -->

8
snippets/pretty-text-underline.md
View File

@ -1,4 +1,7 @@
### Pretty text underline ---
title: Pretty text underline
tags: visual,intermediate
---
A nicer alternative to `text-decoration: underline` or `<u></u>` where descenders do not clip the underline. A nicer alternative to `text-decoration: underline` or `<u></u>` where descenders do not clip the underline.
Natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline. Natively implemented as `text-decoration-skip-ink: auto` but it has less control over the underline.
@ -51,4 +54,5 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
- https://caniuse.com/#feat=css-textshadow - https://caniuse.com/#feat=css-textshadow
- https://caniuse.com/#feat=css-gradients - https://caniuse.com/#feat=css-gradients
<!-- tags: visual -->

8
snippets/reset-all-styles.md
View File

@ -1,4 +1,7 @@
### Reset all styles ---
title: Reset all styles
tags: visual,intermediate
---
Resets all styles to default values with one property. This will not affect `direction` and `unicode-bidi` properties. Resets all styles to default values with one property. This will not affect `direction` and `unicode-bidi` properties.
@ -35,4 +38,5 @@ The `all` property allows you to reset all styles (inherited or not) to default
- https://caniuse.com/#feat=css-all - https://caniuse.com/#feat=css-all
<!-- tags: visual -->

8
snippets/shape-separator.md
View File

@ -1,4 +1,7 @@
### Shape separator ---
title: Shape separator
tags: visual,intermediate
---
Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation. Uses an SVG shape to separate two different blocks to create more a interesting visual appearance compared to standard horizontal separation.
@ -42,4 +45,5 @@ Uses an SVG shape to separate two different blocks to create more a interesting
- https://caniuse.com/#feat=svg - https://caniuse.com/#feat=svg
<!-- tags: visual -->

8
snippets/sibling-fade.md
View File

@ -1,4 +1,7 @@
### Sibling fade ---
title: Sibling fade
tags: interactivity,intermediate
---
Fades out the siblings of a hovered item. Fades out the siblings of a hovered item.
@ -37,4 +40,5 @@ span {
- https://caniuse.com/#feat=css-sel3 - https://caniuse.com/#feat=css-sel3
- https://caniuse.com/#feat=css-transitions - https://caniuse.com/#feat=css-transitions
<!-- tags: interactivity -->

8
snippets/system-font-stack.md
View File

@ -1,4 +1,7 @@
### System font stack ---
title: System font stack
tags: visual,intermediate
---
Uses the native font of the operating system to get close to a native app feel. Uses the native font of the operating system to get close to a native app feel.
@ -37,4 +40,5 @@ falls back to the next if it cannot find the font (on the system or defined in C
#### Browser support #### Browser support
<!-- tags: visual -->

8
snippets/toggle-switch.md
View File

@ -1,4 +1,7 @@
### Toggle switch ---
title: Toggle switch
tags: visual, interactivity,intermediate
---
Creates a toggle switch with CSS only. Creates a toggle switch with CSS only.
@ -67,5 +70,6 @@ This effect is styling only the `<label>` element to look like a toggle switch,
- https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
<!-- tags: visual, interactivity -->
<!-- date: 2018-10-03 --> <!-- date: 2018-10-03 -->

8
snippets/transform-centering.md
View File

@ -1,4 +1,7 @@
### Transform centering ---
title: Transform centering
tags: layout,intermediate
---
Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications. Vertically and horizontally centers a child element within its parent element using `position: absolute` and `transform: translate()` (as an alternative to `flexbox` or `display: table`). Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
@ -43,4 +46,5 @@ Note: Fixed height and width on parent element is for the demo only.
- https://caniuse.com/#feat=transforms2d - https://caniuse.com/#feat=transforms2d
<!-- tags: layout -->

8
snippets/triangle.md
View File

@ -1,4 +1,7 @@
### Triangle ---
title: Triangle
tags: visual,intermediate
---
Creates a triangle shape with pure CSS. Creates a triangle shape with pure CSS.
@ -34,4 +37,5 @@ Experiment with the `px` values to change the proportion of the triangle.
#### Browser support #### Browser support
<!-- tags: visual -->

8
snippets/truncate-text-multiline.md
View File

@ -1,4 +1,7 @@
### Truncate text multiline ---
title: Truncate text multiline
tags: layout,intermediate
---
If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade. If the text is longer than one line, it will be truncated for `n` lines and end with an gradient fade.
@ -51,4 +54,5 @@ If the text is longer than one line, it will be truncated for `n` lines and end
- https://caniuse.com/#feat=css-gradients - https://caniuse.com/#feat=css-gradients
<!-- tags: layout -->

8
snippets/truncate-text.md
View File

@ -1,4 +1,7 @@
### Truncate text ---
title: Truncate text
tags: layout,intermediate
---
If the text is longer than one line, it will be truncated and end with an ellipsis `…`. If the text is longer than one line, it will be truncated and end with an ellipsis `…`.
@ -36,4 +39,5 @@ If the text is longer than one line, it will be truncated and end with an ellips
- https://caniuse.com/#feat=text-overflow - https://caniuse.com/#feat=text-overflow
<!-- tags: layout -->

8
snippets/zebra-striped-list.md
View File

@ -1,4 +1,7 @@
### Zebra striped list ---
title: Zebra striped list
tags: visual,intermediate
---
Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row. Creates a striped list with alternating background colors, which is useful for differentiating siblings that have content spread across a wide row.
@ -34,5 +37,6 @@ Note that you can use it to apply different styles to other HTML elements like d
https://caniuse.com/#feat=css-sel3 https://caniuse.com/#feat=css-sel3
<!-- tags: visual -->
<!-- date: 2018-10-31 --> <!-- date: 2018-10-31 -->